如何在 Chakra UI 中进行条件渲染？

Question

我正在基于变量加载渲染两个 Chakra UI 组件：

{loading ? (<Spinner>) : (<Text color={useColorModeValue('gray.800', 'gray.400')>Hi</Text) }

但 IDE 警告我这一点： ESLint: React Hook "useColorModeValue" is called conditionally. React Hooks must be called in the exact same order in every component render.

我应该如何渲染这些组件？useColorModeValue 是一个钩子

Answer 1

useColorModeValue是一个 React hook，所以它不能有条件地调用，它违反了Hooks 规则。使用三元是一种有条件地调用它的方法。每个渲染周期都必须调用该钩子。

\n

\n

仅在顶层调用挂钩

\n

不要\xe2\x80\x99t 在循环、条件或嵌套函数内调用 Hook。\n相反，在任何早期返回之前，始终在 React 函数的顶层使用 Hooks。useState通过遵循此规则，您可以确保每次组件渲染时\n以相同的顺序调用 Hooks。\n这\n\xe2\x80\x99 允许 React 在多个和调用之间\n正确保留 Hooks 的状态useEffect。

\n

\n

将其useColorModeValue拉出到函数组件的主体中，并保存返回的颜色值以供稍后传递给组件Text。

\n

const color = useColorModeValue(\'gray.800\', \'gray.400\');\n\n...\n\n{loading ? <Spinner> : <Text color={color}>Hi</Text>}\n

\n