Skip to main content
Version: 0.18.0

Components

基本#

任何實作 Component 的型別,都可以在 html! 的巨集中使用:

html!{    <>        // 沒有屬性        <MyComponent />
        // 有屬性        <MyComponent prop1="lorem" prop2="ipsum" />
        // 一次提供很多屬性        <MyComponent with 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 %}

指定子結點的型別#

如果指定了子結點的型別,就可以使用或改變巢狀元件的屬性。下面的範例就是, List 元件包裹 ListItem 元件。另一個真實的範例是 yew-router 的原始碼。還有一個更進階的範例,請參考 Yew GitHub repo 中的 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 %}