Children

普通用法

大多数情况下，在组件内部包含有 children 时，您并不关心组件具体有什么类型的 children。在这种情况下，下面的例子就足够了。

  1. use yew::prelude::*;
  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. }

高级用法

当您希望将某一种类型的组件作为 children 传递给您的组件时，您可以使用yew::html::ChildrenWithProps<T> 。

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

当然，有时您可能需要将 children 限制为几个不同的组件。在这种情况下，您要再深入一点 Yew。

derive_more crate 在这种情况下非常有用。如果你不想用它的话, 你需要手动为每个变量实现 From 。

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