什么是Semantic-UI-React组件中的"as"属性？

Question

17

as被定义为“要呈现的元素类型（字符串或函数）”，在semantic-UI-react的大多数组件中都有应用。这是什么意思呢？

我的理解是，它会以as所指定的方式来改变组件。

例如：

https://react.semantic-ui.com/modules/sidebar 使用Sidebar as={Menu}，那么子元素就是<Menu.Item name='...'>，而不需要像通常一样使用<Menu/>来启动菜单。

- kirill_igum

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Oleksandr Fediashov · 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">