Question

我用这样的React.js构建我的整个网站：

     React.render(
       <div id="mainWrapper">
         <MainHeader />
         <div id="contentWrapper" className="contentWrapper">
           <MainFlow data={example_data} />
           <AddElementWrapper data={activities} />
         </div>
       </div>,
       document.body
     );

但是，在我的一个数据保存组件（即MainFlow或AddElementWrapper）上调用setProperties时，我收到一条错误，指出我应该通过父母操作数据。

Uncaught Error: Invariant Violation: replaceProps(...): You called `setProps` or `replaceProps` on a component with a parent. This is an anti-pattern since props will get reactively updated when rendered. Instead, change the owner's `render` method to pass the correct value as props to the component where it is created.

首先：我认为如果我想要操作的组件有另一个所有者，这只会是一个问题。但是，我的组件没有将React组件作为所有者，只将HTML元素作为父级。

我可以通过将所有应用程序数据附加到单个根组件来解决此问题。但是，我希望将某些数据集分开。有办法吗？

Answer 1

您应该定义一个Wrapper组件并在那里维护数据状态，并在数据从外部世界发生变化时简单地调用setState。

Wrapper = React.createClass({
getInitialState: function() {
    return {example_data: example_data, activities: activities};
},
refresh: function() {
    this.setState({example_data: this.state.example_data, activities: this.state.activities});
},
render: function() {
    return (
        <div id="mainWrapper">
            <MainHeader/>
            <div id="contentWrapper" className="contentWrapper">
                <MainFlow data={this.state.example_data} />
                <AddElementWrapper data={this.state.activities} />
            </div>
        </div>
    );
  }
});

React.render(<Wrapper/>);

Answer 2

您可以将道具复制到子组件的状态，然后更改状态。

在MainFlow和AddElementWrapper组件中，您可以使用：

 getInitialState: function() {
  return {activities: this.props.data};
 },

然后你可以使用this.state.activities并用setState修改它（{activities：yourObject}）

Answer 3

我们的想法是让React Components显式监听数据更改。为此，您将在组件安装时设置回调。

我建议寻找两件事：Backbone + React（和BackboneReact mixin）或Flux + React。

通量方式是拥有一个关于数据可用性的全局事件系统（调度程序），并且主干方式是注册到特定的Collection事件。

此代码直接来自TodoMVC React-backbone项目的BackboneMixin：

componentDidMount: function() {
  // Whenever there may be a change in the Backbone data, trigger a
  // reconcile.
  this.getBackboneCollections().forEach(function(collection) {
    // explicitly bind `null` to `forceUpdate`, as it demands a callback and
    // React validates that it's a function. `collection` events passes
    // additional arguments that are not functions
    collection.on('add remove change', this.forceUpdate.bind(this, null));
  }, this);
},

更多：

Backbone + React示例https://github.com/tastejs/todomvc/tree/gh-pages/examples/react-backbone

如何使用多个根组件分隔数据？

3 个答案: