如何更改reactjs中外部/独立组件的状态或属性

How change state or property of an outer / separate component in reactjs?

本文关键字：组件 状态 属性 独立 何更改 reactjs 外部      更新时间：2023-09-26

当前DOM树类似于：

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

组件5，即是我的模态。我想通过上的onclick事件来设置它的状态和道具

我的目标是根据选择在模态上显示详细数据。因此，我需要相应地设置模态组件的状态和道具。在目前的结构中，我如何做到这一点？

对于小页面来说，老式的方法是将所有状态移动到根节点（comp1）中，这很好。其他组件变成无状态。根节点将要渲染的属性传递给其子节点，同时传递变异属性所需的setter。例如，comp5得到一个属性username，它只是comp1.state.username的值，加上一个属性setUsername，它是一个采用username字符串参数的函数，其中comp1使用setState更新其状态的username。通过这种方式，comp5可以渲染和更新用户名，并且其他组件知道更改（setState触发子级的渲染）。

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

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

在您的反应组件中：

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所说的

相关文章：