Question

我有一个 ReactJS 类，它具有以下结构

-----parent 
|----- child 1 
|----- child 2

child 1 更新了 parent 中的一个变量，该变量应该被处理显示的 child 2。

我能够在第一次更新期间将值传递给孩子 2。但是随着孩子 1 对父变量的进一步更新，我无法将更新后的变量传递给孩子 2 进行显示。

有没有一种方法可以在 ReactJS 类中实现这一点？

包括代码：

class Parent extends Component {
this.state = {
    value: [],
    tempValue: []
    }

onDataChange (val) => {
    this.setState({
        tempValue:val
    })
}

onFirstChange =() => {
    this.setState({
        value:[...value, tempValue]
    )}
}


render (){
    return(
        <Button onClick={this.onFirstChange}
        <Child getValue={this.onDataChange} />

        {
            this.state.value?
            <SecondChild value={this.state.value} />
        }
        )
    }
}

每次单击按钮时，子节点都会更新父节点中应由“第二子节点”读取的“值”。但是在填充“value”之前，SecondChild 不应执行

Answer 1

class Parent {
  constructor(){
   this.state = {
     commonVariable: defaultValue
   }
  }

  updateCommonVariable = (newValue) => {
    this.setState({commonVariable: newValue})
  }

  render(){
    <Child1 updateCommonVariable={this.updateCommonVariable} />
    {this.state.commonVariable && <Child2 commonVariable={this.state.commonVariable} />}
  }
}

在 this.props.updateCommonVariable 中调用 Child1 将更新父级中的 commonVariable 以及 Child2
并且在 Child2 中，this.props.commonVariable 将始终是来自父级的更新值。

React 从一个孩子更新父母状态并将更新后的值传递给一个新孩子

1 个答案: