如何在 reactjs 中更改外部/单独组件的状态或属性？答案

【问题标题】：How change state or property of an outer / separate component in reactjs?如何在 reactjs 中更改外部/单独组件的状态或属性？
【发布时间】：2016-05-19 09:23:31
【问题描述】：

当前的 DOM 树是这样的：

<comp1>
  <div>
      <comp2></comp2>
      <comp3>
         <comp4 />
         <comp4 />
         .........
         .........
         .........
      </comp3>
  </div>
  <comp5></comp5>  
</comp1>

Component5 即是我的模态。我想通过 onclick 事件设置它的状态和道具

我的目标是根据选择在模式上显示详细数据。所以我需要相应地设置模态组件的状态和道具。在当前的结构中我怎么能做到这一点？

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

适合小页面的老式方法是将所有状态移动到根节点（comp1）。其他组件变得无状态。根节点将他们想要渲染的属性以及改变属性所需的设置器传递给它的子节点。例如，comp5 得到一个属性username，它只是comp1.state.username 的值，加上一个属性setUsername，它是一个函数，它接受一个username 字符串参数，其中comp1 使用setState更新其状态的username。这样comp5 可以渲染和更新用户名，并且其他组件知道更改（setState 触发子渲染）。

对于更复杂的应用程序，将所有这些属性传递给子级变得乏味，您可以求助于 flux 和 redux 之类的框架。

【讨论】：

【解决方案2】：

我认为标准的做法是这样的

在你的反应组件中：

constructor(props) {
    ...
    this.state = {selectedComp4:  null
        ...
        }
    }
...
handleSelectedComp4Change (yourData) {
    this.setState({selectedComp4: yourData})
}
...
render() {
...
    return (
    <comp1>
    <div>
        <comp2></comp2>
        <comp3>
            <comp4 onSelectedComp4Change = {this.handleSelectedComp4Change}/>
            <comp4 onSelectedComp4Change = {this.handleSelectedComp4Change}/>
             ...
        </comp3>
    </div>
    <comp5 SelectedComp4={this.state.selectedComp4}></comp5>  
    </comp1>
    )
}

在 comp4 中发送您的数据：onClick={() => { this.props.onSelectedComp4Change(someData) }}

在 comp5 中使用您在 this.props.SelectedComp4 中的数据

编辑：

就像@Valéry 说的

【讨论】：