如何在查克拉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相反，始终在React函数的顶层使用Hooks，在任何提前返回之前。通过遵循此规则，您可以确保每次渲染组件时，都会以相同的顺序调用挂钩。这就是React正确保持Hooks状态的原因在多个CCD_ 3和CCD_。

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

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

Answer 2

您可以通过创建一个常量来有条件地呈现Chakra UI组件中的属性，该常量接受一个值并根据定义的条件返回所需的属性字符串。这个例子是使用React制作的。

const colorChange = (value) => {
let color
if (value >= 0){
color = "green"
} else {
color = "red"
}
return color
}
<Text color={colorChange(value)}>

当我试图解决这个问题时，我在谷歌上搜索了标题，但没有找到任何资源。所以我希望这个回应能帮助那些遇到同样问题的人。干杯