react 用父组件状态控制子组件状态方案

原创

Lucky小黄人 2023-05-06 10:47:15 博主文章分类：前端 ©著作权

©著作权归作者所有：来自51CTO博客作者Lucky小黄人的原创作品，请联系作者获取转载授权，否则将追究法律责任

react 想用父组件的状态来控制子组件的状态。有时我们可能想在父组件里设置子组件某个状态的值，这时我们应该怎么实现代码呢？

法一：把需要共享的状态放在子组件的参数里

比如下面这个 MyTestSubModal 子组件，有 2 个状态：visible 和 loading，分别使用 setVisible 和 setLoading 来控制，不仅子组件自己可以设置状态，而且想在父组件中也能修改这两个状态，那么可以把这 4 个参数都放到子组件的参数里。这样子组件和父组件都可以用这 4 个参数。父组件修改状态后，子组件的状态也会变化。

export default function MyTestSubModal(props: { visible: boolean; setVisible: (value: boolean) => any; loading: any; setLoading: (value: any) => any }) {
  const { visible, setVisible, loading, setLoading } = props;
  // 后续就可以像使用局部状态一样使用  visible, setVisible, loading, setLoading 了
}