Question

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

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

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

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

所以，我要做的是将属性值“ method”带到当前状态，并将其推到“ allItems”数组中。

Answer 1

解决方法是lift state up：共享状态（此处为项目）应由两个组件的最接近的祖先保留。然后，该祖先通过道具将状态传递给子项，以及子项可用于使状态发生变化的回调函数。

例如使用伪代码：

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>
      )
   }
}

Answer 2

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

不使用Redux将状态传递给同级组件

2 个答案: