Tag: reactjs

React与ReactDOM？: 我有点新的反应。我看到我们必须导入两件事开始， React和ReactDOM ，任何人都可以解释这个区别。我正在阅读React文档，但没有说。

ReactJS状态与道具: 这可能是在回应和意见之间的界限，但是我正在来回地讨论如何构build一个ReactJS组件，随着复杂性的增长和可以使用某个方向。来自AngularJS，我想把我的模型作为属性传递给组件，并让组件直接修改模型。还是应该把模型分解成不同的state属性，并在返回上游时将它们编译回来？什么是ReactJS方式？以博客文章编辑器为例。试图直接修改模型最终看起来像： var PostEditor = React.createClass({ updateText: function(e) { var text = e.target.value; this.props.post.text = text; this.forceUpdate(); }, render: function() { return ( <input value={this.props.post.text} onChange={this.updateText}/> <button onClick={this.props.post.save}/>Save</button> ); } }); 这似乎是错误的。更多的是使我们的text模型属性state的React方法，并保存之前编译回模型： var PostEditor = React.createClass({ getInitialState: function() { return { text: "" }; }, componentWillMount: function() { this.setState({ text: […]

React + Redux – 在表单组件中处理CRUD的最佳方法是什么？: 我有一个用于创build，读取，更新和删除的表单。我用相同的forms创build了3个组件，但我传递了不同的道具。我得到了CreateForm.js，ViewForm.js（只读删除button）和UpdateForm.js。我曾经使用PHP，所以我总是以一种forms做到这一点。我使用React和Redux来pipe理商店。当我在CreateForm组件中时，我传递给我的子组件这个道具createForm={true}不填充input值，并且createForm={true}用它们。在我的ViewForm组件中，我通过这个道具readonly="readonly" 。而且我还遇到了一个textarea问题，这个textarea充满了价值，而且不可更新。反应textarea的值是只读的，但需要更新什么是最好的结构只有一个组件处理这些forms的不同状态？你有任何build议，教程，video，演示分享？

在Facebook React中使用mixins与组件重用代码: 我开始在一个Backbone项目中使用Facebook React，到目前为止这个过程非常顺利。但是，我注意到有一些重复进入我的React代码。例如，我有几个像INITIAL ， SENDING和SENT等状态的窗体小部件。当一个button被按下，表单需要被validation，一个请求被做，然后状态被更新。状态保存在里面反应this.state ，当然还有字段值。如果这些是骨干视图，我会提取一个名为FormView的基类，但我的印象是，React既不支持也不支持子类共享视图逻辑（纠正我，如果我错了）。我已经看到了两种在React中重用代码的方法： Mixins （如React附带的LinkedStateMixin ）; 容器组件（例如react-infinite-scroll ）。我正确的mixin和容器是首选在Reactinheritance？这是一个故意的devise决定？使用混合或容器组件为第二段的“表单控件”示例更有意义吗？这是FeedbackWidget和JoinWidget处于当前状态的要点。他们有一个类似的结构，类似的beginSend方法，都需要有一些validation支持（还没有）。

React-Native – 使用Navigator组件自定义导航: 我正在探索React Native的可能性，同时在Navigator组件的帮助下开发一个在视图之间自定义导航的演示应用程序 – http://facebook.github.io/react-native/docs/navigator.html#content 主应用程序类呈现导航器，并在renderScene返回传递的组件： class App extends React.Component { render() { return ( <Navigator initialRoute={{name: 'WelcomeView', component: WelcomeView}} configureScene={() => { return Navigator.SceneConfigs.FloatFromRight; }} renderScene={(route, navigator) => { // count the number of func calls console.log(route, navigator); if (route.component) { return React.createElement(route.component, { navigator }); } }} /> ); } } 现在的应用程序包含2个视图： class FeedView […]

你如何validationReactJS中嵌套对象的PropTypes？: 我使用一个数据对象作为我的ReactJS组件的道具。 <Field data={data} /> 我知道它很容易validationPropTypes对象本身： propTypes: { data: React.PropTypes.object } 但是如果我想validation里面的值呢？即。 data.id，data.title？ props[propName]: React.PropTypes.number.required // etc…

在Flux架构中，您如何pipe理商店生命周期？: 我在阅读Flux，但Todo应用程序的例子太简单了，以至于我不能理解一些关键点。想像一下像Facebook这样的单页面应用程序，它具有用户个人资料页面。在每个用户个人资料页面上，我们要显示一些用户信息和他们最后的post，无限滚动。我们可以从一个用户configuration文件导航到另一个。在Flux体系结构中，这与商店和调度程序如何对应？我们会为每个用户使用一个PostStore ，还是我们会有某种全球性的商店？调度员怎么样，我们会为每个“用户页面”创build一个新的Dispatcher，还是我们会使用一个单独的？最后，体系结构的哪一部分负责pipe理“特定于页面”商店的生命周期以响应路由变化？而且，一个伪页面可能有几个相同types的数据列表。例如，在个人资料页面上，我想显示“ 追随者”和“ 追随者” 。单身UserStore如何在这种情况下工作？ UserPageStorepipe理UserPageStore followedBy: UserStore和follows: UserStore ？

React – 将表单元素状态传递给兄弟/父元素的正确方法？: 假设我有一个React类P，它呈现了两个子类C1和C2。 C1包含一个input字段。我将这个input字段称为Foo。我的目标是让C2对Foo中的变化做出反应。我已经提出了两个解决scheme，但他们都不是很对。第一个scheme 分配一个状态state.input 。在P中创build一个onChange函数，它接受一个事件并设置state.input 。把这个转换成C1作为props ，让C1绑定this.props.onChange到Foo的onChange 。这工作。每当Foo的值发生变化时，就会触发P中的一个setState ，所以P将有input传递给C2。但是，出于同样的原因，感觉不太对劲：我从一个子元素设置父元素的状态。这似乎背叛了React的devise原则：单向数据stream。这是我应该怎么做的，还是有更多的React-natural解决scheme？解决scheme二把Foo放在P. 但是，当我构build应用程序时，这是否应该遵循一个devise原则 – 将所有表单元素都放在最高级别的render中？就像在我的例子中，如果我有一个很大的C1渲染，我真的不想把整个render的C1 render为P，只是因为C1有一个表单元素。我应该怎么做？

Reactjs – 重新调整浏览器大小: 当浏览器窗口resize时，如何让React重新呈现视图？背景我有一些块，我想在页面上单独布局，但是我也希望他们在浏览器窗口更改时更新。最终的结果将会像Ben Holland的 pinterest布局一样，但是使用React写的不仅仅是jquery。我还有一段路要走码这是我的应用程序： var MyApp = React.createClass({ //does the http get from the server loadBlocksFromServer: function() { $.ajax({ url: this.props.url, dataType: 'json', mimeType: 'textPlain', success: function(data) { this.setState({data: data.events}); }.bind(this) }); }, getInitialState: function() { return {data: []}; }, componentWillMount: function() { this.loadBlocksFromServer(); }, render: function() { return ( […]