组件

基础

任何实现了 Component trait 的类型都可被用在 html! 宏中:

  1. html!{
  2. <>
  3. // 没有属性
  4. <MyComponent />
  5. // 具有属性
  6. <MyComponent prop1="lorem" prop2="ipsum" />
  7. // 同时提供全套的 props
  8. <MyComponent with props />
  9. </>
  10. }

嵌套

如果组件的 Properties 中有 children 字段,则可以被传递子组件。

{% code title=”parent.rs” %}

  1. html! {
  2. <Container>
  3. <h4>{ "Hi" }</h4>
  4. <div>{ "Hello" }</div>
  5. </Container>
  6. }

{% endcode %}

{% code title=”container.rs” %}

  1. pub struct Container(Props);
  2. #[derive(Properties)]
  3. pub struct Props {
  4. pub children: Children,
  5. }
  6. impl Component for Container {
  7. type Properties = Props;
  8. // ...
  9. fn view(&self) -> Html {
  10. html! {
  11. <div id="container">
  12. { self.0.children.clone() }
  13. </div>
  14. }
  15. }
  16. }

{% endcode %}

拥有 Props 的嵌套子组件

如果包含组件标注了 children 的类型,则可以访问和更改嵌套组件的属性。在下面的示例中,List 组件可以包含 ListItem 组件。有关此模式的真实示例,请查看 yew-router 的源码。有关更高级的示例,请在 yew 主仓库中查看 nested-list 示例代码。

{% code title=”parent.rs” %}

  1. html! {
  2. <List>
  3. <ListItem value="a" />
  4. <ListItem value="b" />
  5. <ListItem value="c" />
  6. </List>
  7. }

{% endcode %}

{% code title=”list.rs” %}

  1. pub struct List(Props);
  2. #[derive(Properties)]
  3. pub struct Props {
  4. pub children: ChildrenWithProps<ListItem>,
  5. }
  6. impl Component for List {
  7. type Properties = Props;
  8. // ...
  9. fn view(&self) -> Html {
  10. html!{{
  11. for self.0.children.iter().map(|mut item| {
  12. item.props.value = format!("item-{}", item.props.value);
  13. item
  14. })
  15. }}
  16. }
  17. }

{% endcode %}