我可以在 React 组件之外使用 React Hooks

Question

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

Answer 1

你不能。 从文档

仅从 React 函数调用 Hooks

不要从常规 JavaScript 函数调用 Hooks。 相反，您可以：

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

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

Answer 2

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

Answer 3

就像之前提到的，你不能在 React 之外使用 React Hooks，也没有大量的背景信息。 我可以建议您创建一个单独的 Context 文件，从 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>

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