reactjs - 父母如何改变孩子状态和孩子如何改变父母状态反应

Question

假设在当前项目中，我们没有设置 redux。我们在层次结构中有这些组件：

- p1
-- p2
--- p3
---- p4
----- c1

我希望 p3 组件改变 c​​1 的状态，而 c1 改变 p3 的状态。有没有简单的方法来实现这一目标？

标签： reactjs

Answer 1

从 P3 改变 C1 的状态：

p3 组件可以通过改变它向下传递给 p4 的 props 来改变 c1 的状态，p4 必须改变它向下传递给 c1 的 props。在 c1 中，您将通过 componentWillReceiveProps 检测道具更改，并在此函数中根据从 p3 一直向下传递的道具设置新的 c1 状态：

// in c1
componentWillReceiveProps(newProps) {
    this.setState({ someC1Data: newProps.someP3Data });
}

从 C1 更改 P3 的状态：

这可以通过使用回调来完成。c1 的 props 将是一个回调，比如 changeParent3State(someC1Data)，所以在 c1 中，只要你想改变 p3 的状态，你就可以调用 this.props.changeParent3State(someC1Data)。您将在 p4 中具有相同的函数回调，以便 p4 接收 c1 的函数调用，并且 p4 再次通过 this.props.changeParent3State(someC1Data) 对 p3 进行相同的调用父树。p3 组件现在已经接收到 c1 的数据，并且在函数实现中可以根据 c1 的数据更改其状态，如果提供了任何数据：

// in p3
changeParent3State(someC1Data) {
    this.setState({ someP3Data: someC1Data});
}