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 了
}