web-dev-qa-db-ja.com

Semantic-ui-reactコンポーネントの「as」小道具とは何ですか？

asは、semantic-UI-reactのほとんどのコンポーネントでAn element type to render as (string or function).として定義されています。どういう意味ですか？

私の理解では、それはasが何であれコンポーネントを何らかの形で変更します。

例：

https://react.semantic-ui.com/modules/sidebarSidebar as={Menu}がある場合、子は<Menu.Item name='...'>であり、開始に必要な通常の<Menu/>はありません。メニュー。

semantic-ui-react
15
kirill_igum

この機能はaugmentationと呼ばれ、レンダリングされた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">
19
Oleksandr Fediashov