Skip to main content
Version: Next

组件

基础

组件可以在 html! 宏中使用:

use yew::prelude::*;

#[function_component]
fn MyComponent() -> Html {
html! {
{ "This component has no properties!" }
}
}

#[derive(Clone, PartialEq, Properties)]
struct Props {
user_first_name: String,
user_last_name: String,
}

#[function_component]
fn MyComponentWithProps(props: &Props) -> Html {
let Props { user_first_name, user_last_name } = props;
html! {
<>{"user_first_name: "}{user_first_name}{" and user_last_name: "}{user_last_name}</>
}
}

let props = Props {
user_first_name: "Bob".to_owned(),
user_last_name: "Smith".to_owned(),
};

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

// 使用属性
<MyComponentWithProps user_first_name="Sam" user_last_name="Idle" />

// 一次性提供所有属性
<MyComponentWithProps ..props.clone() />

// 使用变量中的属性,并覆盖特定值
<MyComponentWithProps user_last_name="Elm" ..props />
</>
};

嵌套

如果组件在其 Properties 中有一个 children 字段,它可以接受子组件/元素

parent.rs
use yew::prelude::*;

#[derive(PartialEq, Properties)]
struct Props {
id: String,
children: Html,
}

#[function_component]
fn Container(props: &Props) -> Html {
html! {
<div id={props.id.clone()}>
{ props.children.clone() }
</div>
}
}

html! {
<Container id="container">
<h4>{ "Hi" }</h4>
<div>{ "Hello" }</div>
</Container>
};

html! 宏允许您使用 ..props 语法传递一个基本表达式,而不是单独指定每个属性,类似于 Rust 的函数式更新语法。 这个基本表达式必须出现在传递任何单独的 props 之后。 当传递一个带有 children 字段的基本 props 表达式时,html! 宏中传递的子元素将覆盖已经存在于 props 中的子元素。

use yew::prelude::*;

#[derive(PartialEq, Properties)]
struct Props {
id: String,
children: Html,
}

#[function_component]
fn Container(props: &Props) -> Html {
html! {
<div id={props.id.clone()}>
{ props.children.clone() }
</div>
}
}

let props = yew::props!(Props {
id: "container-2",
children: Html::default(),
});

html! {
<Container ..props>
// 子元素将覆盖 props.children
<span>{ "I am a child, as you can see" }</span>
</Container>
};

相关示例