Tag: reactjs

你如何使用React.jssearch引擎优化？

关于React.js的文章喜欢指出，React.js对search引擎优化非常有用。 不幸的是，我从来没有读过，你是如何做到的。 你只_escaped_fragment_像https://developers.google.com/webmasters/ajax-crawling/docs/getting-started中那样实现_escaped_fragment_ ，让React在服务器上呈现页面，当url包含_escaped_fragment_ ，或者还有更多？ 能够不依赖_escaped_fragment_会很好，因为可能不是所有可能的抓取站点（例如在共享function中）实现_escaped_fragment_ 。

Reactjs组件的asynchronous渲染

我想在我的ajax请求完成后渲染我的组件。 下面你可以看到我的代码 var CategoriesSetup = React.createClass({ render: function(){ var rows = []; $.get('http://foobar.io/api/v1/listings/categories/').done(function (data) { $.each(data, function(index, element){ rows.push(<OptionRow obj={element} />); }); return (<Input type='select'>{rows}</Input>) }) } }); 但是我得到了下面的错误，因为我在我的ajax请求的done方法中返回了render。 Uncaught Error: Invariant Violation: CategoriesSetup.render(): A valid ReactComponent must be returned. You may have returned undefined, an array or some other invalid object. 有没有办法等待我的Ajax请求结束之前开始呈现？

React-Redux：所有组件状态应该保存在Redux Store中

说我有一个简单的切换： 当我点击button，颜色组件在红色和蓝色之间变化 我可以通过做这样的事情来达到这个目的。 index.js Button: onClick={()=>{dispatch(changeColor())}} Color: this.props.color ? blue : red container.js connect(mapStateToProps)(indexPage) action_creator.js function changeColor(){ return {type: 'CHANGE_COLOR'} } reducer.js switch(){ case 'CHANGE_COLOR': return {color: true} 但这是一个很多的代码写的地狱，我可以在5秒内用jQuery，一些类和一些CSS来实现… 所以我想我真正要问的是，我在这里做错了什么？

在反应堆中处理读取错误的最好方法是什么？

我有一个客户端的减速器，另一个为AppToolbar和其他一些… 现在让我们说，我创build了一个获取操作来删除客户端，如果失败，我的代码在客户端reducer应该做一些东西，但我也想在AppToolbar中显示一些全局错误。 但客户端和AppToolbar减速器不共享状态的相同部分，我不能在减速器中创build新的操作。 那么我怎么想显示全局错误呢？ 谢谢 更新1： 我忘了提及我使用este devstack 更新2：我标记了埃里克的答案是正确的，但我不得不说，我在este中使用的解决scheme更像埃里克和丹的答案的组合…你只需要find什么适合你在你的代码中最好的.. 。

反应开发工具不加载在Chrome浏览器

我正在debugging使用React.js的应用程序，Chrome扩展列表清楚地显示了React Developer Tools已安装，当我访问React站点http://facebook.github.io/react/时，我可以清楚地看到开发人员工具窗口中的“反应”标签。 然而，当我debugging我的应用程序，我看到在控制台中： Download the React DevTools for a better development experience: http://fb.me/react-devtools React.js:87 有人能告诉我如何让它使用React开发工具？ 谢谢！

Facebook的反应与Web组件的优点和缺点（聚合物）

Facebook的React对于即将到来的Web组件规格有什么主要的好处，反之亦然（或者更多的苹果对苹果的比较是对Google的Polymer库）？ 根据这个JSConf EU谈话和React主页，React的主要好处是： 使用组件模型解耦和增加内聚力 抽象，构成和expression 虚拟DOM和合成事件（这基本上意味着他们完全重新实现了DOM及其事件系统） 在IE 8上启用现代HTML5事件 服务器端渲染 可测性 绑定到SVG，VML和<canvas> （显然）除了这个虚拟DOM的概念之外，几乎所有提到的内容都是通过Web组件本地集成到浏览器中的。 我可以看到虚拟DOM和合成事件今天如何能够有效地支持旧浏览器，但是不会丢掉大量的本地浏览器代码，就像长时间在自己的脚下投射一样？ 就现代浏览器而言，是不是很多不必要的开销/重新发明轮子？ 以下是一些我认为 React缺less的Web组件会关心的问题。 如我错了请纠正我。 本地浏览器支持（读“保证更快”） 在香草JavaScript中编写JavaScript，在CSS中编写CSS，在HTML中编写HTML。 使用Shadow DOM进行样式封装 React取而代之，这需要在JavaScript中编写CSS。 不漂亮。 双向绑定

如何input导出的RelayContainer

我正在尝试使用Relay.createContainerinput（使用flowtype）正在增强的组件。 我查看了“react-relay”包导出的types ，但是ReactContainer似乎并没有包含Props。 我用RelayContainer ， ReactClass ， React$Component等进行了实验，最后得到的预期结果是： // Foo.js // @flow import React from "react"; import Relay from "react-relay"; type Props = { title: string; } const Foo({ title }: Props) => (<div>{title}</div>); const exported: Class<React$Component<void, Props, void>> = Relay.createContainer(Foo, { fragments: { … } }); export default exported; – // Bar.js // @flow […]

react.js用于与父节点通信的自定义事件

我正在听和正常的DOM CustomEvent沟通到父节点： 在小孩： var moveEvent = new CustomEvent('the-graph-group-move', { detail: { nodes: this.props.nodes, x: deltaX, y: deltaY }, bubbles: true }); this.getDOMNode().dispatchEvent(moveEvent); 在父母： componentDidMount: function () { this.getDOMNode().addEventListener("the-graph-group-move", this.moveGroup); }, 这有效，但有一个反应特定的方式会更好？

React vs Angular：使用React缓慢渲染

我正在对Angular和React进行比较，并决定尝试一个性能testing，看看在这两个框架中，一个大的（ish）列表将会呈现多快。 当我用我的React原型和一些基本货币格式化完成后，在我的快速笔记本电脑上渲染需要2秒钟。 有了Angular，它几乎没有引人注意 – 只有当我切换到我的手机，它有一个明显的滞后。 这是非常令人惊讶的，因为有人告诉我说，React本来就是为了performance而摔打Angular的裤子，但在这种情况下，情况恰恰相反。 我将我的原型提取到一个非常简单的应用程序，试图找出问题： https ： //github.com/pselden/react-render-test 在这个例子中，在改变语言之后，这个简单的列表花费了将近200ms，而我几乎没有做任何事情。 我在这里做错了什么？ /** @jsx React.DOM */ 'use strict'; var React = require('react'), Numbers = require('./Numbers'); var numbers = [] for(var i = 0; i < 2000; ++i){ numbers.push(i); } var App = React.createClass({ getInitialState: function() { return { locale: 'en-US' }; }, _onChangeLocale: function(event) { […]

React – 在挂载的组件上设置setState（）

在我的反应组件im试图实现一个简单的微调，而ajax请求正在进行 – 即时通讯使用状态来存储加载状态。 出于某种原因，下面这段代码在我的React组件中会引发这个错误 只能更新已安装或已安装的组件。 这通常意味着您在卸载的组件上调用了setState（）。 这是一个没有操作。 请检查未定义组件的代码。 如果我摆脱了第一个setState调用错误消失。 constructor(props) { super(props); this.loadSearches = this.loadSearches.bind(this); this.state = { loading: false } } loadSearches() { this.setState({ loading: true, searches: [] }); console.log('Loading Searches..'); $.ajax({ url: this.props.source + '?projectId=' + this.props.projectId, dataType: 'json', crossDomain: true, success: function(data) { this.setState({ loading: false }); }.bind(this), error: function(xhr, status, err) […]