组合

了解如何在 Chakra UI 中组合组件。

The`as` 属性

用于更改 React 组件渲染的底层 HTML 元素。它提供了一种直接的方式来更改底层元素，同时保留组件的功能。

<Heading as="h3">Hello, world!</Heading>

警告

TypeScript: 使用 as 属性的注意事项是，传递给 as 属性的组件类型必须与组件的属性兼容。我们不会从 as 属性推断底层组件的属性。

The `asChild` 属性

用于将组件功能组合到其子元素上。这种方法受到 Radix UI 的启发，提供了最大的灵活性。

<Popover.Root>
  <Popover.Trigger asChild>
    <Button>Open</Button>
  </Popover.Trigger>
</Popover.Root>

在此示例中，asChild 属性允许将 Button 用作气泡框的触发器。

最佳实践

为避免使用 as 和 asChild 属性时常见的陷阱，需要考虑以下几点最佳实践

转发引用: 确保底层组件正确转发传递给它的引用。
展开属性: 确保底层组件展开传递给它的属性。

const MyComponent = React.forwardRef((props, ref) => {
  return <Box ref={ref} {...props} />
})

// with `as` prop
<MyComponent as="button" />

// with `asChild` prop
<Button asChild>
  <MyComponent> Click me </MyComponent>
</Button>

概述

动画

组合

The asChild 属性

最佳实践

The `asChild` 属性