Children

General usage

Most of the time, when allowing a component to have children, you don’t care what type of children the component has. In such cases, the below example will suffice.

  1. use yew::{html, Children, Component, Html, Properties};
  3. #[derive(Properties, Clone)]
  4. pub struct ListProps {
  5.     #[prop_or_default]
  6.     pub children: Children,
  7. }
  9. pub struct List {
  10.     props: ListProps,
  11. }
  13. impl Component for List {
  14.     type Properties = ListProps;
  15.     // ...
  17.     fn view(&self) -> Html {
  18.         html! {
  19.             <div class="list">
  20.                 { for self.props.children.iter() }
  21.             </div>
  22.         }
  23.     }
  24. }

Advanced usage

Typed children

In cases where you want one type of component to be passed as children to your component, you can use yew::html::ChildrenWithProps<T>.

  1. use yew::{html, ChildrenWithProps, Component, Html, Properties};
  3. // ...
  5. #[derive(Properties, Clone)]
  6. pub struct ListProps {
  7.     #[prop_or_default]
  8.     pub children: ChildrenWithProps<Item>,
  9. }
  11. pub struct List {
  12.     props: ListProps,
  13. }
  15. impl Component for List {
  16.     type Properties = ListProps;
  17.     // ...
  19.     fn view(&self) -> Html {
  20.         html! {
  21.             <div class="list">
  22.                 { for self.props.children.iter() }
  23.             </div>
  24.         }
  25.     }
  26. }

Enum typed children

Of course, sometimes you might need to restrict the children to a few different components. In these cases, you have to get a little more hands-on with Yew.

The derive_more crate is used here for better ergonomics. If you don’t want to use it, you can manually implement From for each variant.

  1. use yew::{
  2.     html, html::ChildrenRenderer, virtual_dom::VChild,
  3.     Component, Html, Properties
  4. };
  6. // `derive_more::From` implements `From<VChild<Primary>>` and
  7. // `From<VChild<Secondary>>` for `Item` automatically!
  8. #[derive(Clone, derive_more::From)]
  9. pub enum Item {
  10.     Primary(VChild<Primary>),
  11.     Secondary(VChild<Secondary>),
  12. }
  14. // Now, we implement `Into<Html>` so that yew knows how to render `Item`.
  15. impl Into<Html> for Item {
  16.     fn into(self) -> Html {
  17.         match self {
  18.             Self::Primary(child) => child.into(),
  19.             Self::Secondary(child) => child.into(),
  20.         }
  21.     }
  22. }
  24. #[derive(Properties, Clone)]
  25. pub struct ListProps {
  26.     #[prop_or_default]
  27.     pub children: ChildrenRenderer<Item>,
  28. }
  30. pub struct List {
  31.     props: ListProps,
  32. }
  34. impl Component for List {
  35.     type Properties = ListProps;
  36.     // ...
  38.     fn view(&self) -> Html {
  39.         html! {
  40.             <div class="list">
  41.                 { for self.props.children.iter() }
  42.             </div>
  43.         }
  44.     }
  45. }

Optional typed child

You can also have a single optional child component of a specific type too:

  1. use yew::{html, virtual_dom::VChild, Component, Html, Properties};
  3. #[derive(Clone, Properties)]
  4. pub struct PageProps {
  5.     #[prop_or_default]
  6.     pub sidebar: Option<VChild<PageSideBar>>,
  7. }
  9. struct Page {
  10.     props: PageProps,
  11. }
  13. impl Component for Page {
  14.     type Properties = PageProps;
  15.     // ...
  17.     fn view(&self) -> Html {
  18.         html! {
  19.             <div class="page">
  20.                 { self.props.sidebar.clone().map(Html::from).unwrap_or_default() }
  21.                 // ... page content
  22.             </div>
  23.         }
  24.     }
  25. }
  27. // The page component can be called either with the sidebar or without:
  29. // Page without sidebar
  30. html! {
  31.     <Page />
  32. }
  34. // Page with sidebar
  35. html! {
  36. <Page sidebar=html_nested! {
  37.     <PageSideBar />
  38.     } />
  39. }