React Hoooks：从父级更改子级状态

Question

我在从父组件更改孩子的状态时遇到问题。这是一个示例沙箱。https://codesandbox.io/s/parent-child-communication-hooks-34tjn?file=/src/components/Child.jsx

这是我的目标：当用户单击父组件中的“打开所有按钮”时，所有子组件将一起打开。关闭将关闭所有孩子。

但是，仍然需要控制每个孩子。

Answer 1

[您好，欢迎来到StackOverflow。我在您的CodeSandbox中看到您开始使用React Hooks。除了useState钩子，我们还有useEffect，将在依赖项更改后触发。您可以使用此钩子来实现。

只需向您的子组件添加一个新道具，该道具将包含父项的状态值，我们将其称为parentValue。这是您的父组件

//Parent.jsx
//your code
      {childrentdata.map(x => (
        <ChildComponent
          name={x.name}
          buttonOn={state.ParentOn}
          parentValue={state.ParentOn}
        />
      ))}

然后，在您的子组件中添加钩子

useEffect(() => {
    setState(prevState => ({ ...prevState, buttonOn: props.parentValue }));
  }, [props.parentValue]);

挂钩将监视我们在数组依赖项中指定为第二个参数的道具和状态更改。因此，每次父级切换更改时，它将更改所有子级。我进行了更改，如果您注意到我在setState中使用了回调，则可以通过这种方式获得状态的实际值而又不会获得过时的值。因此，使用此回调来防止副作用是一个好习惯。