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

Question

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

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

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

Answer 1

确实没有必要根据 parent 所做的事情来设置 child 的状态。这就是道具的作用。

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>
    </>
  );
};

然后在你的 child 组件中你可以使用 prop.

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

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

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

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

React How to trigger setState in all children component?

javascript

reactjs

react-component

react-state

react-state-management