semantic-ui-react 组件中的 "as" 道具是什么？

Question

as在semantic-UI-react中的大部分组件中被定义为An element type to render as (string or function).。这是什么意思？

我的理解是它以某种方式改变了 as 中的组件。

示例：

https://react.semantic-ui.com/modules/sidebar 有 Sidebar as={Menu} 然后 children 是 <Menu.Item name='...'> 没有启动菜单所需的典型 <Menu/>。

Answer 1

此功能称为augmentation，您可以控制渲染的HTML标签或将一个组件渲染为另一个组件。额外的 props 被传递给你渲染的组件。它允许在不添加额外的嵌套组件的情况下组合组件功能和道具。

您使用 Sidebar 的示例表明 Sidebar 会将其子项呈现为 Menu。这也可以用以下方式编写，但这会产生额外的标记，这并不总是正确的，并且可能会破坏样式。

<Sidebar>
  <Menu>
    <Menu.Item />
  </Menu>
</Sidebar>

带标签的基本示例：

<Button /> // will produce <button class='ui button' />
<Button as='a' /> // will produce <a class='ui button' />

示例react-router：

<Menu.Item as={Link} to='/home' /> // will produce <a class="item" href="/home">

What are "as" props in semantic-ui-react components?