React 如何在所有子组件中触发 setState？

Question

如何从父组件同时更改所有子组件的状态？

const ParentComponent = () =>{
    <Child1/>
    <Child2/>
    <Child3/>

    <button>change children's state</button>
}
export default ParentComponent;

Answer 1

确实没有必要根据父母所做的事情来设置孩子的状态。这就是道具的用途。

const ParentComponent = () => {
  const [propToPass, setPropToPass] = useState('');
  return (
    <>
      <Child1 passedProp={propToPass} />
      <Child2 passedProp={propToPass} />
      <Child3 passedProp={propToPass} />

      <button onClick={() => setPropToPass('prop')}>change children's state</button>
    </>
  );
};

然后在您的子组件中，您可以使用该道具。

const Child1 = ({ passedProp }) => {
  return <div>passedProp</div>;
};

或者如果你真的想根据道具改变状态。 编辑：正如有人在 cmets 中指出的那样，这只会在 prop 更改时初始化状态而不更新状态。所以直接访问 props 会更好。

const Child1 = ({ passedProp }) => {
  const [someState, setSomeState] = useState(passedProp);
  return <div>someState</div>;
};