组件

基础

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


#![allow(unused)]
fn main() {
html!{
    <>
        // 没有属性
        <MyComponent />

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

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

嵌套

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


#![allow(unused)]
fn main() {
html! {
    <Container>
        <h4>{ "Hi" }</h4>
        <div>{ "Hello" }</div>
    </Container>
}
}

#![allow(unused)]
fn main() {
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>
       }
    }
}
}

:::note 要派生Properties的类型也必须实现Clone 。这同样可以通过使用#[derive(Properties, Clone)]或手动为您的类型实现Clone :::

拥有 Props 的嵌套子组件

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


#![allow(unused)]
fn main() {
html! {
    <List>
        <ListItem value="a" />
        <ListItem value="b" />
        <ListItem value="c" />
    </List>
}
}

#![allow(unused)]
fn main() {
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
            })
        }}
    }
}
}