React Hooks：从 parent 更改 children 状态

Question

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

我的目标是：当用户点击 Parent 组件中的 "Turn on all button" 时，所有 children 组件将一起打开。关闭将关闭所有 children.

但是，还是有必要控制每个child。

Answer 1

您好，欢迎来到 Whosebug。我在您的 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 中使用回调，这是我们可以获取状态的实际值而不获取陈旧值的方式。因此，使用此回调来防止副作用是一个很好的做法。

React Hooks：从 parent 更改 children 状态

React Hoooks: change children state from parent

parent-child

reactjs

react-hooks