Reactjs 在不使用Redux的情况下将状态传递给同级组件

因此，我有一个名为“itemSelection”的组件，其中包含一个状态，该状态的属性为array类型的“allItems”

constructor(props){
    super(props);
    this.state = {
      allItems: []
    }
  }

然后我有一个名为“methods”的组件，其中包含一个返回值的函数

selectMethod = (e) => {
      const x = e.target.getAttribute("data");  
      this.setState({method: x}, () => console.log(this.state.method));  
  }

---

因此，我想做的是将propery“method”的值带到“allItems”数组中，并将其与当前状态一起推到一旁。

在itemSelection组件中，创建一个更新allItems的函数。然后，将属性中的函数传递给方法组件并从那里调用它

解决方案是：共享状态（此处为项目）应由两个组件最近的祖先保留。然后，该祖先通过props将状态传递给子级，以及子级可以用来改变状态的回调函数

例如，在伪代码中：

class Parent extends React.Component {

   constructor(props) {
      super(props)
      this.state = {
         allItems: []
      }
      this.onSelect = this.onSelect.bind(this)
   }

   onSelect(item) {
      this.setState({allItems: this.state.allItems.push(item)})
   }

   render() {
      return (
         <Child1 items={this.state.allItems}/>
         <Child2 onSelect={this.onSelect}/>
      )
   }
}

class Child1 extends React.Component {
   render() {
      return (
         {this.props.items.map(i => i.name)}
      )
   }
}

class Child2 extends React.Component {
   render() {
      return (
         <button onClick={this.props.onSelect(...)}>button</button>
      )
   }
}

类父级扩展React.Component{
建造师（道具）{
超级（道具）
此.state={
allItems:[]
}
this.onSelect=this.onSelect.bind（this）
}
onSelect（项目）{
this.setState（{allItems:this.state.allItems.push（item）}）
}
render（）{
返回(
)
}
}
类Child1扩展了React.Component{
render（）{
返回(
{this.props.items.map（i=>i.name）}
)
}
}
类Child2扩展了React.Component{
render（）{
返回(
按钮
)
}
}

有关此示例，请查看。