How to pass a function as a Prop in Yew?

在Yew中，将函数作为Prop（属性）传递是一种常见的模式，用于实现组件之间的通信。这通常发生在你想让子组件能够触发父组件中的某些函数或行为时。以下是如何在Yew中实现这一点的具体步骤和示例：

1. 定义一个Props结构体

首先，你需要在子组件中定义一个带有函数的Props结构体。这个函数通常是一个回调函数，它可以在父组件中被定义，并最终传递给子组件。

rust
use yew::prelude::*;

#[derive(Properties, PartialEq)]
pub struct ChildProps {
    pub on_click: Callback<()>,
}

这里，Callback 是 Yew 提供的一个类型，用来封装一个可以被调用的回调。Callback<()> 表示这个回调不接受参数并且也不返回值。

2. 在子组件中使用这个函数

在子组件的实现中，你可以使用这个传递进来的函数。通常这是在响应某个用户交互（如点击按钮）时触发。

rust
pub struct Child;

impl Component for Child {
    type Message = ();
    type Properties = ChildProps;

    fn create(ctx: &Context<Self>) -> Self {
        Self
    }

    fn view(&self, ctx: &Context<Self>) -> Html {
        html! {
            <button {onclick: ctx.props().on_click.reform(|_| ())}>
                { "Click me!" }
            </button>
        }
    }
}

在上面的示例中，我们创建了一个按钮并设置了其 onclick 事件处理器。当按钮被点击时，传递的回调函数被调用。

3. 在父组件中传递函数

最后，在父组件中，你需要传递一个具体的回调函数给子组件。

rust
pub struct Parent;

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

    fn create(ctx: &Context<Self>) -> Self {
        Self
    }

    fn view(&self, ctx: &Context<Self>) -> Html {
        let on_click = ctx.link().callback(|_| {
            log::info!("Button clicked in child component!");
        });

        html! {
            <Child {on_click} />
        }
    }
}

在这里，我们使用 ctx.link().callback 来创建一个回调，当触发时，它将执行指定的代码（在这个例子中是打印一条日志信息）。

总结

通过这种方式，Yew 允许父组件通过Props传递回调函数给子组件，使得子组件可以在适当的时候调用父组件中定义的函数。这是一种强大的模式，可以帮助你构建复杂的交互式界面，同时保持组件之间的解耦。