Question

我想创建一个只有一个事件的组件，并将其置于任何给定级别（子级或孙级或更深级）的祖先中，并且当事件触发时，此祖先的父级将执行（例如，警报（“I”）我是“+ parent.name +”而我的一位祖先做了一些事情“））。一个老人家的想象，居民拒绝死亡，拥有一百万个农民，每当他们的一个祖先生日时，居民都会告知彼此。什么是最优雅的方式来做到这一点，因为我明白观察者模式是反应？并且可以在创建子项时不手动传递父对象来完成吗？

Answer 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。如果你想要更深入，你将不得不通过道具不断传递该功能，这可能会在更复杂的应用程序中变得乏味。这就是为什么redux / flux很受欢迎，因为它可以让你管理状态/调度动作并避免长链回调函数。

Answer 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
}.....

对父母进行沟通反应的灵长类动物

2 个答案: