祖先与父母沟通中的反应答案

【问题标题】：Ansestors to parents communication in react祖先与父母沟通中的反应
【发布时间】：2016-09-23 14:05:05
【问题描述】：

我想创建一个只有一个事件的组件并将其放置在任何给定级别（子或孙或更深）的祖先中，当事件触发时，该祖先的父级将采取行动（例如，alert("I我是“+parent.name+”，而我的一个分析者做了一些事情“））。想象一个老人院的居民拒绝死亡并且拥有一百万个ansestors，并且每次他们的一个ansestors过生日时，居民都会互相通知。既然我知道观察者模式在反应中受到影响，那么最优雅的方法是什么？是否可以在创建子对象时不手动传递父对象来完成？

【问题讨论】：

标签： reactjs design-patterns listener observer-pattern ancestor

【解决方案1】：

我知道如何做到这一点的一种方法是将函数向下传递到在父级中执行某些操作的“家谱”

class Parent extends React.Component {
  constructor(props) {
    super(props)
    
    this.doSomethingInParent = this.doSomethingInParent.bind(this);
  }
  
  doSomethingInParent() {
    console.log('running in parent');
  }
  
  render() {
    return <Child parentsFunction={this.doSomethingInParent} />
  }
}

现在，如果您在子组件中运行 parentsFunction，您会在 doSomethingInParent 中看到 console.log。如果你想更深入，你将不得不不断地通过 props 传递该功能，这在更复杂的应用程序中可能会变得乏味。这就是 redux/flux 受欢迎的原因，因为它可以让您管理状态/调度操作并避免长链的回调函数。

【讨论】：

传递函数确实很乏味，flux/redux 的问题是我无法弄清楚如何将特定的侦听器应用于封闭的组件组，如果 ansestor 发出消息我怎么能只注册它的父母来听。据我了解，所有父母都会在这里传达信息。
我只能使用“contains”和 React.findDOMnode 来做到这一点。 jsfiddle.net/shaibam/d0q5mwc4/33

【解决方案2】：

在讨论后使用 getChildContext 和 childContextTypes 找到了解决方案： check if a component is a child or ancestor of another component ReactJS 参见示例（2 个解决方案）：https://jsfiddle.net/shaibam/d0q5mwc4/33/。

contextTypes: {
    notifyChange: React.PropTypes.func
}.....

【讨论】：