如何解决React 如何在所有子组件中触发 setState?
如何从父组件同时更改所有子组件的状态?
const ParentComponent = () =>{
<Child1/>
<Child2/>
<Child3/>
<button>change children's state</button>
}
export default ParentComponent;
解决方法
确实没有必要根据父母所做的事情来设置孩子的状态。这就是道具的用途。
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>;
};
或者如果你真的想根据道具改变状态。 编辑:正如有人在评论中指出的那样,这只会在更改 prop 时初始化状态而不更新状态。所以直接访问 props 会是一个更好的主意。
const Child1 = ({ passedProp }) => {
const [someState,setSomeState] = useState(passedProp);
return <div>someState</div>;
};
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。