base-vs-radix

# Base 与 Radix `base` 和 `radix` 之间的 API 差异。请检查 `npx shadcn@latest info` 中的 `base` 字段。 ## 内容 - 组合：asChild 与 render - 非按钮元素的按钮/触发器 - Select (items 属性、占位符、定位、多选、对象值) - ToggleGroup (type 与 multiple) - Slider (标量与数组) - Accordion (type 与 defaultValue) --- ## 组合：asChild (radix) 与 render (base) Radix 使用 `asChild` 来替换默认元素。Base 使用 `render`。不要在触发器外包裹额外的元素。 **错误：** tsx **正确 (radix)：** tsx Open **正确 (base)：** tsx <DialogTrigger render={}>Open 这适用于所有触发器和关闭组件：`DialogTrigger`, `SheetTrigger`, `AlertDialogTrigger`, `DropdownMenuTrigger`, `PopoverTrigger`, `TooltipTrigger`, `CollapsibleTrigger`, `DialogClose`, `SheetClose`, `NavigationMenuLink`, `BreadcrumbLink`, `SidebarMenuButton`, `Badge`, `Item`。 --- ## 非按钮元素的按钮/触发器 (仅限 base) 当 `render` 将元素更改为非按钮（``, ``）时，添加 `nativeButton={false}`。 **错误 (base)：** 缺少 `nativeButton={false}`。 tsx <Button render={}>Read the docs **正确 (base)：** tsx <Button render={} nativeButton={false}> Read the docs **正确 (radix)：** tsx Read the docs 对于 `render` 不是 `Button` 的触发器也是如此： tsx // base. <PopoverTrigger render={} nativeButton={false}> Pick date --- ## Select **items 属性 (仅限 base)。** Base 要求根组件上必须有 `items` 属性。Radix 仅使用内联 JSX。 **错误 (base)：** tsx **正确 (base)：** tsx const items = [ { label: "Select a fruit", value: null }, { label: "Apple", value: "apple" }, { label: "Banana", value: "banana" }, ] {items.map((item) => ( {item.label} ))}