rust yew function_component

在 Rust 中使用 Yew 框架编写 Function Component 非常简单。Function Component 是一种无状态组件，只接收 props 参数并返回一个 Virtual DOM 树。

下面是一个简单的例子，演示如何编写一个 Function Component：

use yew::prelude::*;

fn function_component(props: &Props) -> Html {
    html! {
        <div>
            <h1>{ props.title }</h1>
            <p>{ props.content }</p>
        </div>
    }
}

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

在这个例子中，我们定义了一个名为 `function_component` 的函数组件，并接受一个 `props` 参数。在函数组件中，我们使用 `html!` 宏来创建 Virtual DOM 树，并将 `props` 中的 `title` 和 `content` 属性设置为标题和段落的文本内容。

为了使用这个组件，我们需要在父组件中将 `Props` 传递给 `function_component` 函数，并将其渲染到页面上：

use yew::prelude::*;

struct App {}

impl Component for App {
    type Message = ();
    type Properties = ();

    fn create(_: Self::Properties, _: ComponentLink<Self>) -> Self {
        App {}
    }

    fn update(&mut self, _: Self::Message) -> ShouldRender {
        false
    }

    fn view(&self) -> Html {
        let props = Props {
            title: String::from("Hello, World!"),
            content: String::from("This is a Yew Function Component."),
        };
        function_component(&props)
    }
}

在这个例子中，我们创建了一个名为 `App` 的组件，并在 `view` 方法中将 `Props` 传递给 `function_component` 函数。在实际应用中，我们可以根据需要设置不同的 `Props` 属性来渲染不同的页面内容。

希望这个例子对你有帮助！