Skip to main content
Version: 0.20

组件

基础

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

html!{
<>
// 没有属性
<MyComponent />

// 具有属性
<MyComponent prop1="lorem" prop2="ipsum" />

// 同时提供全套的 props
<MyComponent ..props />
</>
}

嵌套

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

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

html! {
<Container>
<h4>{ "Hi" }</h4>
<div>{ "Hello" }</div>
</Container>
}

{% endcode %}

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

pub struct Container(Props);

#[derive(Properties)]
pub struct Props {
pub children: Children,
}

impl Component for Container {
type Properties = Props;

// ...

fn view(&self) -> Html {
html! {
<div id="container">
{ self.0.children.clone() }
</div>
}
}
}

{% endcode %}

拥有 Props 的嵌套子组件

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

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

html! {
<List>
<ListItem value="a" />
<ListItem value="b" />
<ListItem value="c" />
</List>
}

{% endcode %}

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

pub struct List(Props);

#[derive(Properties)]
pub struct Props {
pub children: ChildrenWithProps<ListItem>,
}

impl Component for List {
type Properties = Props;

// ...

fn view(&self) -> Html {
html!{{
for self.0.children.iter().map(|mut item| {
item.props.value = format!("item-{}", item.props.value);
item
})
}}
}
}

{% endcode %}