时间戳

首页 > 解决方案 > 在 React 中为嵌套组件导出 Hooks？

javascript - 在 React 中为嵌套组件导出 Hooks？

问题描述

我正在导出带有嵌套组件的钩子，以便父级可以切换子级的状态。我怎样才能使这个切换与钩子而不是经典类或老式函数一起工作？

子组件

export let visible;
export let setVisible = () => {};

export const ToggleSwitch = () => {
    const [visible, setVisibile] = useState(false);
    return visible && (
       <MyComponent />
    )
}

家长

import * as ToggleSwitch from "ToggleSwitch";

export const Parent: React.FC<props> = (props) => {
    return (
       <div>
          <button onClick={() => ToggleSwitch.setVisible(true)} />
       </div>
    )
}

错误：Linter 说 [setVisible] 是子级中未使用的变量...（但在父级中是必需的）

标签： javascriptreactjsreact-hooks

解决方案

如您所知，React 是单向数据绑定，因此如果您想传递任何道具或状态，则只有一种方法可以将其从父组件传递到子组件，并且如果逻辑变得更大，则必须将其设置为全局状态通过使用带有反应钩子的状态管理库或上下文 API 使用减速器和使用效果。

推荐阅读