Chakra UI v3 发布后，我们收到的常见反馈是关于代码片段的。用户觉得与 v2 不同，v3 需要代码片段才能使组件正常工作。

这不是我们的初衷——代码片段旨在作为有用的预制组件组合，而非强制性的样板代码。我们想澄清，代码片段完全是可选的，仅提供方便的起点。

因此，我们重新组织了文档，使其始终显示直接从以下位置导入的完整代码@chakra-ui/react.

这样，您无需运行任何命令即可复制和粘贴代码。

替换代码片段

以下是更改的快速概述

手风琴（Accordion）

之前

import {
  AccordionItem,
  AccordionItemContent,
  AccordionItemTrigger,
  AccordionRoot,
} from "@/components/ui/accordion"

const Demo = () => {
  return (
    <AccordionRoot>
      <AccordionItem>
        <AccordionItemTrigger>Item</AccordionItemTrigger>
        <AccordionItemContent>Content</AccordionItemContent>
      </AccordionItem>
    </AccordionRoot>
  )
}

之后

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

const Demo = () => {
  return (
    <Accordion.Root>
      <Accordion.Item>
        <Accordion.ItemTrigger>
          Item
          <Accordion.ItemIndicator />
        </Accordion.ItemTrigger>
        <Accordion.ItemContent>
          <Accordion.ItemBody>Content</Accordion.ItemBody>
        </Accordion.ItemContent>
      </Accordion.Item>
    </Accordion.Root>
  )
}

菜单

之前

import {
  MenuContent,
  MenuItem,
  MenuRoot,
  MenuTrigger,
} from "@/components/ui/menu"

const Demo = () => {
  return (
    <MenuRoot>
      <MenuTrigger asChild>
        <Button>Open</Button>
      </MenuTrigger>
      <MenuContent>
        <MenuItem value="..." />
      </MenuContent>
    </MenuRoot>
  )
}

之后

import { Menu, Portal } from "@chakra-ui/react"

const Demo = () => {
  return (
    <Menu.Root>
      <Menu.Trigger asChild>
        <Button>Open</Button>
      </Menu.Trigger>
      <Portal>
        <Menu.Positioner>
          <Menu.Content>
            <Menu.Item value="..." />
          </Menu.Content>
        </Menu.Positioner>
      </Portal>
    </Menu.Root>
  )
}

快捷方式

为了使您的代码更简洁、更易于编写，我们为常见用例引入了快捷组件。

我们通过设置默认的 children 属性，或创建组合现有组件的“糖”组件来实现这一点。

复选框

这是一个复选框示例。

这可以正常工作

<Checkbox.Control>
  <Checkbox.Indicator />
</Checkbox.Control>

但如果您不需要自定义复选框图标，可以简化它

<Checkbox.Control />

评分（Rating）

Rating 组件也是如此。

这可以正常工作

<RatingGroup.Control>
  {Array.from({ length: 5 }).map((_, index) => (
    <RatingGroup.Item key={index} index={index + 1}>
      <RatingGroup.ItemIndicator />
    </RatingGroup.Item>
  ))}
</RatingGroup.Control>

但如果您不需要自定义评分图标，可以简化它

<RatingGroup.Control />

例外

以下组件是规则的例外，将继续使用代码片段

• Provider: Provider 是您需要包裹应用程序的根组件
• Toaster: Toaster 是一个用于显示通知的组件
• PasswordInput: PasswordInput 用于收集密码
• Tooltip: Tooltip 是一个用于显示工具提示的组件
• Toggletip: Toggletip 看起来像工具提示，但功能像弹出框

这些组件将保留为代码片段，因为它们提供了易用性。

下一步是什么？

现在我们已经重构了代码片段，我们将进入 Chakra 的下一个阶段。

• 将 @ark-ui/react 升级到 v5 以提升渲染性能
• 实现 Combobox 和 CommandMenu 组件
• 构建并发布用于数据可视化的 @chakra-ui/charts

如果您有任何反馈，请开启讨论并告知我们。