17

as is defined as An element type to render as (string or function). in the most of the components in semantic-UI-react. What does that mean?

My understanding is that it somehow changes the component in whatever is as is.

Example:

https://react.semantic-ui.com/modules/sidebar has Sidebar as={Menu} then the children are <Menu.Item name='...'> without typical <Menu/> that is required to start the menu.

kirill_igum
  • 3,953
  • 5
  • 47
  • 73

1 Answers1

24

This feature is called augmentation, you can control the rendered HTML tag or render one component as another component. Extra props are passed to the component you are rendering as. It allows to compose component features and props without adding extra nested components.

Your example with Sidebar shows that Sidebar will render its children to Menu. This can also be written in the following way, but this procudes extra markup, which is not always correct and possibly can break styling.

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

Basic example with tags:

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

Example with react-router:

<Menu.Item as={Link} to='/home' /> // will produce <a class="item" href="/home">
Oleksandr Fediashov
  • 4,315
  • 1
  • 24
  • 42