我可以在 React 组件之外使用 React Hooks 吗？答案

【问题标题】：Can I use React Hooks outside a React Component我可以在 React 组件之外使用 React Hooks 吗？
【发布时间】：2022-11-17 08:17:22
【问题描述】：

我正在开发具有最新 React 版本的 React App。我想要做的是在一个不是 React 组件的函数中调用 React useContext Hook。有人可以帮我吗？

【问题讨论】：

这回答了你的问题了吗？ Can I use hooks inside a function (not a functional component)

标签： javascript reactjs react-hooks

【解决方案1】：

你不能。来自the docs

仅从 React 函数调用挂钩
不要从常规的 JavaScript 函数中调用 Hooks。相反，您可以：

✅ 从 React 函数组件调用 Hooks。
✅ 来自自定义的 Call Hooks 钩子（我们将在下一页了解它们）。

通过遵循此规则，您可以确保组件中的所有有状态逻辑都是清晰的从其源代码可见。

【讨论】：

请你能建议任何替代方案吗？
@YahyaPatel 你到底想做什么？

【解决方案2】：

您可能需要考虑将上下文数据作为参数传递给函数，因为您无法在 React 组件之外使用 useContext 挂钩。

【讨论】：

【解决方案3】：

就像之前提到的，你不能在 React 之外使用 React Hooks，也没有大量的背景信息。我建议您创建一个单独的上下文文件，从 React 导入 createContext 和 useState。然后为进一步的 React 组件创建一个包装器

type ContextType = {
    someState: stateDetails | null,
    setSomeState: React.Dispatch<React.SetStateAction<stateDetails | null>>
}

type ContextProps = {
     children: React.ReactNode
}

export const Context = createContext<ContextType>({} as ContextType)

export const ContextWrapper = ({ children }: ContextProps) => {
    const [ someState, setSomeState ] = useState<stateDetails | null>(null)

return (
    <>
        <Context.Provider value={{ someState, setSomeState }}>
            {children}
        </Context.Provider>
    </>
)

}

然后你可以用包装器包装你的应用程序的一部分，但将 jsx 封装在新的包装器组件中，以便它在应用程序周围传输。

    <ContextWrapper>
         <OtherComponent />
    </ContextWrapper>

这应该足以创建一些简单的上下文，对于更高级的状态处理，请查看Zustand或Redux。无论如何，这个上下文只能传递到 React 元素中。

【讨论】：

【解决方案4】：

有一个名为 react-hooks-outside 的库可以让你这样做

【讨论】：