javascript - react JS : How to send an event down the component tree?

Question

所以我有这个 React JS 项目，但我遇到了这个问题:我的应用程序看起来像这样(它更复杂，但这就是我所说的...):

<App>
  <Container>
    <Item />
  </Container>
  <Button />
</App>

我需要做的是当我点击 Button 时在 Item 中调用一个方法。我在想我可以做一些事情，比如通过 Prop 将事件从 App 发送到 Item。所以它看起来像这样:

class App extends React.Component{
  ...
  event buttonClicked `\\idk something like this...`
  ...
  render(
    <div>
      <Container event={buttonClicked} />
      <Button onClick={buttonClicked} />
    </div>
  )
  ...
}

class Container extends React.Component{
  ...
  render(
    <Item event={this.props.event}/>
  )
  ...
}

class Item extends React.Component{

  _buttonClicked(){
  ... `\\This happens when I click the button.`
  } 
  ...
}

这样的事情可能吗？谢谢:)

Answer 1

想法是将绑定(bind)的事件处理程序向下传递到子组件中，然后将事件冒泡。你所描述的基本上是正确的

你可以在这里做的是:

• 在App中定义buttonClickHandler
• 将buttonClickHandler传入Button
• 将 buttonClickHandler 的结果或操作传递到您的项目容器中。 Prop
• 在您的项目组件中调用此结果

还有多种其他方法可以做到这一点:

Multiple patterns存在就是为了做到这一点:

• Event Emitter/Target/Dispatcher:监听器需要引用订阅的来源。
• Signals:类似，但你不在这里使用任何随机字符串。每个信号是一个特定的对象。你确切地知道一个对象发生了什么可以处理。
• 发布/订阅:您不需要对来源的具体引用触发事件，有一个全局对象可访问处处处理所有事件。这就像匿名一样。你具有主题(字符串)的概念，您可以在其中存储和检索事件数据。