我可以在React组件外使用React Hooks吗?

Question

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

Answer 1

不行。从docs

只调用React函数中的钩子

不要从普通的JavaScript函数中调用Hooks。相反，你可以:

✅从React函数组件调用钩子。
✅从自定义调用钩子钩子(我们将在下一页了解它们)。

通过遵循此规则，您可以确保组件中的所有有状态逻辑都是清晰的

Answer 2

你可能想要考虑将上下文数据作为参数传递给函数，因为你不能在React组件外使用useContext钩子。

Answer 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元素中。