#[function_component]

#[function_component(_)]将一个普通的 Rust 函数变成一个函数式组件。具有该属性的函数必须返回Html并且可以为组件应接受的 props 类型采用单个参数。参数类型需要是对实现PropertiesPartialEq的类型的引用(例如props: &MyProps )。如果函数没有任何参数,则生成的组件不接受任何 props 。

该属性不会将您的原函数替换为组件。您需要提供一个名称作为属性的输入,该属性值将成为组件的标识符。例如您有一个名为chat_container的函数并添加了属性#[function_component(ChatContainer)],那么您就可以像这样使用该组件:

  1. html! { <ChatContainer /> }

示例

  1. #[derive(Properties, Clone, PartialEq)]
  2. pub struct RenderedAtProps {
  3. pub time: String,
  4. }
  5. #[function_component(RenderedAt)]
  6. pub fn rendered_at(props: &RenderedAtProps) -> Html {
  7. html! {
  8. <p>
  9. <b>{ "Rendered at: " }</b>
  10. { props.time.clone() }
  11. </p>
  12. }
  13. }
  1. #[function_component(App)]
  2. fn app() -> Html {
  3. let (counter, set_counter) = use_state(|| 0);
  4. let onclick = {
  5. let counter = Rc::clone(&counter);
  6. Callback::from(move |_| set_counter(*counter + 1))
  7. };
  8. html! {
  9. <div>
  10. <button onclick=onclick>{ "Increment value" }</button>
  11. <p>
  12. <b>{ "Current value: " }</b>
  13. { counter }
  14. </p>
  15. </div>
  16. }
  17. }