javascript - ReactJS - 有一个不拥有它的 child 的 "main"组件？

Question

我有一堆组件不能有相同的父组件，但我希望它们共享它们的状态。

为了便于讨论，假设顶层组件称为 Main，子组件称为 Child1、Child2 等。

有什么方法可以让 Child1 和 Child2 成为 Main 组件的子组件，仅在 React 意义上 - 所以我可以将 Main 的属性和状态从 Main 组件传递给它们吗？

从 DOM 的 Angular 来看，Child1 和 Child2 位于我页面的完全不同的区域，实际上大约有 40 个。

Answer 1

您可以使用事件发射器，而不是直接调用 setState，所有实例都可以将负载应用到它们的状态。

我们可以使用 mixin 来抽象这种行为。

var makeChangeEventMixin = function(emitter){
   return {
       componentDidMount: function(){
           emitter.addListener('change', this.__makeChangeEventMixin_handler_);
       },
       componentWillUnmount: function(){
           emitter.removeListener('change', this.__makeChangeEventMixin_handler_);
       },
       __makeChangeEventMixin_handler_: function(payload){
           this.setState(payload);
       },
       emitStateChange: function(payload){
           emitter.emit('change', payload);
       }
   };
};

然后在我们的代码中我们将使用 EventEmitter(如果你不使用 browserify/webpack，你可以使用 EventEmitter2)

var EventEmitter = require('events').EventEmitter;
var fooEvents = new EventEmitter();

var Counter = React.createClass(){
    mixins: [makeChangeEventMixin(fooEvents)],
    getInitialState: function(){ return {count: 0} },
    render: function(){return <div onClick={this.handleClick}>{this.state.count}</div>},
    handleClick: function(){
        this.emitStateChange({count: this.state.count + 1});
    }
};

如果您有 100 个计数器，当您点击其中任何一个时，它们都会更新。

---

这样做的一个限制是初始状态是错误的。您可以通过跟踪 makeChangeEventMixin 中的状态、自行合并它并使用 replaceState 代替 setState 来解决此问题。这也会更高效。如果这样做，mixin 可以实现适当的 getInitialState。