semantic-ui-react - 语义-ui-react 组件中的“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/>

score 22 · Accepted Answer

此功能称为增强，您可以控制呈现的 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">

1 回答 1