reactjs - React Hooks：从父级更改子级状态

Question

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

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

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

标签： reactjsreact-hooksparent-child

Answer 1

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

只需向您的子组件添加一个新道具，该道具将包含父组件的状态值，我们将其称为 this 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的 . 因此，使用此回调来防止副作用是一个好习惯。