Question

假设我有一个反应组件的层次结构：

<Parent>
   <Child>
      <GrandChild>
        <GrandGrandChild />
      </GrandChild>
   </Child>
</Parent>

现在GrandGrandChild会触发一个由Parent处理的事件。如何通过hieararchy获取信息？我可以想到两种方式：

备选方案1：

Parent.render：

<div><Child onMyEvent={this.handler.bind(this)} /></div>

Child.render：

<div><GrandChild onMyEvent={this.props.onMyEvent} /></div>

GrandChild.render：

<div><GrandGrandChild onMyEvent={this.props.onMyEvent} /></div>

当事件发生时，GrandGrandChild将调用

this.props.onMyEvent(args)

备选方案2：

Parent.render：

<div><Child app={this} /></div>

Child.render：

<div><GrandChild app={this.props.app} /></div>

GrandChild.render：

<div><GrandGrandChild app={this.props.app} /></div>

当事件发生时，GrandGrandChild将调用

this.props.app.onMyEvent.bind(this.props.app)(args)

两种选择都需要通过所有级别的道具。什么是更好的？还是有更好的选择？

Answer 1

我最终使用list=['ok','go','no','poi','duo','ok','go','nah'] b=0 b=int(len(list)/2) #print the middle element change .5 values print(list[b]) if((len(list)%2)==0): #if list is of even number print both middle values print(list[b+1])并解决了问题（任何连接的组件都可以访问应用程序状态的任何部分，而无需通过多级组件传递道具）。使用reducer函数管理状态比使用redux更有效，但是如果你观察到一些最佳实践，它会得到回报。

反应应用程序体系结构：如何在深层次结构中向上传递事件

备选方案1：

备选方案2：

1 个答案: