语义 - 反应组件中的"as"道具是什么？

Question

as被定义为An element type to render as (string or function).语义-UI-react中的大多数组件.那是什么意思？

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

例:

https://react.semantic-ui.com/modules/sidebar 已经Sidebar as={Menu}那么孩子们<Menu.Item name='...'>不典型<Menu/>时所需的开始菜单.

Answer 1

此功能称为扩充,您可以控制呈现的HTML标记或将一个组件呈现为另一个组件.额外的道具将传递给您渲染的组件.它允许组合组件功能和道具,而无需添加额外的嵌套组件.

您的示例将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">