Question

我希望子组件的状态随着父组件的状态更新而更新。对父状态变量的任何更改都应反映在孩子的状态中。我该怎么办？

谢谢！

编辑：

我的组件按以下方式排列。我想从子代2访问父代的状态。通过将子代1的状态设置为父代的状态，我将能够执行此操作。

父母->孩子1->孩子2

Answer 1

您可以将所需的父状态部分作为道具传递给孩子。然后，每次父状态更改时，子项将使用正确的值重新呈现。

如果您需要从孩子内部更改状态，则取决于您想要的行为。

您可以通过传递回调函数作为道具来使孩子改变父母的状态（您可以将用来改变父母中的状态作为道具的函数传递给孩子）

或者，您可以通过使用useEffect或ComponentDidUpdate侦听prop的更改，使子状态在更改后重置为父状态。

useEffect(() => { setState(props.partOfparentState)},[props.partOfparentState])

或

ComponentDidUpdate(prevProps) {
    if(previousProps.partOfParentState != props.partOfParentState) {
        partOfParentStatethis.setState({state:props.parpartOfParentStatetOfParentState})
    }
}

您还可能希望通过更复杂的useEffect可以实现其他行为。

Answer 2

状态和道具

React DOM将元素及其子元素与上一个元素进行比较，并且仅应用将DOM引入到所需状态。

react中的数据流是“单向”或“自上而下”的，任何状态始终归某个特定组件所有，任何数据或从该状态派生的UI仅会影响“以下”组件那棵树。

如果您将组件树想象为道具的瀑布，则每个组件的状态就像一个附加的水源一个任意点，但也向下流动。

这就是为什么状态通常被称为局部状态或封装状态的原因。它不是拥有和设置该组件以外的任何组件都可以访问。 @reactjs

因此，您应该将状态传递给子组件，也称为prop。

编辑：

层次结构将如下所示： App（ state -date）=> Child1（ prop date，将相同的 prop 传递给下一个孩子）=> Child2（从他的父母- Child1 获得date

示例（基于Class Components ）：

<App>:

应用程序的根目录。

<ClockList={this.state.date} />

<ClockList>:

注意，我们正在使用道具

<Clock={this.props.date} />

<Clock>:

import React from "react";

const Clock = (props) => {
  // Object Destructuring can also be done in the function itself.
  const { date } = props;
  return (
    <div className="container">
      <p>{date}</p>
    </div>
  );
};

export default Clock;

应对：如何将子组件的状态设置为其父组件的状态？

2 个答案:

状态和道具