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

发布于 2025-01-09 10:41:37 字数 360 浏览 2 评论 0原文

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

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

但 IDE 警告我这一点： ESLint：React Hook“useColorModeValue”被有条件地调用。在每个组件渲染中必须以完全相同的顺序调用 React Hooks。

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

原文

I'm rendering two Chakra UI components based in a variable loading:

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

But the IDE is warning me about this:
ESLint: React Hook "useColorModeValue" is called conditionally. React Hooks must be called in the exact same order in every component render.

How should I render those components? useColorModeValue is a hook

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

顾铮苏瑾 2025-01-16 10:41:37

useColorModeValue 是一个 React hook，因此不能有条件地调用它，它破坏了 Hook 规则。使用三元是一种有条件地调用它的方法。每个渲染周期都必须调用该钩子。

仅调用顶层的钩子
不要在循环、条件或嵌套函数内调用 Hook。
相反，始终在 React 函数的顶层使用 Hooks，
在任何提前返回之前。通过遵循此规则，您可以确保
每次组件渲染时都会以相同的顺序调用钩子。
这就是 React 能够正确保存 Hooks 状态的原因
在多个 useState 和 useEffect 调用之间。

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

const color = useColorModeValue('gray.800', 'gray.400');

...

{loading ? <Spinner> : <Text color={color}>Hi</Text>}

useColorModeValue is a React hook, so it can't be conditionally called, it is breaking the Rules of Hooks. Using a ternary is a way to conditionally call it. The hook must be called each and every render cycle.

Only Call Hooks at the Top Level
Don’t call Hooks inside loops, conditions, or nested functions.
Instead, always use Hooks at the top level of your React function,
before any early returns. By following this rule, you ensure that
Hooks are called in the same order each time a component renders.
That’s what allows React to correctly preserve the state of Hooks
between multiple useState and useEffect calls.

Pull the useColorModeValue out into the body of the function component and save the returned color value to be passed later to the Text component.

const color = useColorModeValue('gray.800', 'gray.400');

...

{loading ? <Spinner> : <Text color={color}>Hi</Text>}

回复收藏 0 原文

未蓝澄海的烟 2025-01-16 10:41:37

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

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

<Text color={colorChange(value)}>

我在尝试解决这个问题时准确地用谷歌搜索了标题，但没有找到任何资源。所以我希望这个回答可以帮助遇到同样问题的人。干杯!

You can conditionally render a property within a Chakra UI component by creating a constant that takes a value and returns the desired property string based on defined conditions. This example was made using React.

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

<Text color={colorChange(value)}>

I googled the title exactly when trying to solve this issue, and found no resources. So I'm hoping this response can help someone who's ran into this same issue. Cheers!

回复收藏 0 原文

~没有更多了~