javascript - 如何将数据与多个根组件分开？

我正在像这样用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元素。

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

最佳答案

您应该定义一个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/>);