服务器组件

了解如何在 React 服务器组件中使用 Chakra UI。

React 服务器组件是 React 中的一项新功能，它允许您构建在服务器上渲染并将 UI 返回给客户端而无需注水（hydration）的组件。

客户端组件仍会在服务器上渲染，但在客户端进行注水。了解更多关于服务器组件模式

Chakra UI 组件是客户端组件，因为它们依赖于useState、useRef 和 useState，这些在服务器组件中不可用。

信息

总结: 默认情况下，Chakra UI 组件可以与 React 服务器组件一起使用，而无需添加 'use client' 指令。

用法

以下是如何在 Next.js 中将 Chakra UI 组件与 React 服务器组件一起使用的示例

import { Heading } from "@chakra-ui/react"
import fs from "node:fs"

export default async function Page() {
  const content = fs.readFileSync("path/to/file.md", "utf-8")
  return <Heading as="h1">{content}</Heading>
}

Chakra 工厂

当使用 chakra() 工厂函数时，请使用 use client 指令并将组件移动到专用文件。

"use client"

import { chakra } from "@chakra-ui/react"

export const BlogPost = chakra("div", {
  base: {
    color: "red",
  },
  variants: {
    primary: {
      true: { color: "blue" },
      false: { color: "green" },
    },
  },
})

然后将组件导入到您的页面服务器组件中

import { BlogPost } from "./blog-post"

export default async function Page() {
  const content = fs.readFileSync("path/to/file.md", "utf-8")
  return <BlogPost>{content}</BlogPost>
}

Hook

从 Chakra UI 导入 Hook 时，请使用 use client 指令

"use client"

import { useBreakpointValue } from "@chakra-ui/react"

export function MyComponent() {
  const value = useBreakpointValue({ base: "mobile", md: "desktop" })
  return <div>{value}</div>
}

渲染 Props

当使用渲染 Props 时，请使用 use client 指令

"use client"

import { ProgressContext } from "@chakra-ui/react"

export function MyComponent() {
  return <ProgressContext>{({ value }) => <div>{value}</div>}</ProgressContext>
}

颜色模式

测试