组件
基础
组件可以在 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>
};