如何在Yew中传递一个函数作为预言片？

Question

我只是想通过他们的道具把一个函数传递给我的一个孩子，这样它就可以在那里使用了。

这是我现在的代码

use log::info;
use yew::html::onclick::Event;
use yew::prelude::*;


// Create Properties with the function I want to use
#[derive(yew::Properties, PartialEq)]
pub struct MyProps {
    pub do_this: fn(Event) -> (),
    pub val: String,
}

#[function_component(Base)]
pub fn home(props: &MyProps) -> Html {
    let do_this_func = props.do_this.clone();
    html! {
        <button onclick={move |e: Event|  do_this_func(e)}>  {"press me"} </button>
    }
}

// Pass the function
#[function_component(App)]
pub fn app() -> Html {
    fn do_this_func(s: Event) {
        info!("clicked from my func")
    }
    html! {
        <Base do_this={do_this_func} val={"hello".to_string()} />
    }
}

fn main() {
    wasm_logger::init(wasm_logger::Config::default());
    yew::start_app::<App>();
}

如果我删除do_this并传入val，编译器错误就会消失。我希望仅仅在道具上指定类型就足够了，但事实并非如此。

以下是我得到的编译器错误。

   Compiling yew-app v0.1.0 (/Users/sasacocic/development/tinkering/yew-app)
error[E0277]: the trait bound `fn(MouseEvent) {do_this_func}: IntoPropValue<fn(MouseEvent)>` is not satisfied
  --> src/main.rs:25:24
   |
25 |         <Base do_this={do_this_func} val={"hello".to_string()} />
   |               -------  ^^^^^^^^^^^^ the trait `IntoPropValue<fn(MouseEvent)>` is not implemented for `fn(MouseEvent) {do_this_func}`
   |               |
   |               required by a bound introduced by this call
   |
   = help: the following other types implement trait `IntoPropValue<T>`:
             <&'static str as IntoPropValue<AttrValue>>
             <&'static str as IntoPropValue<Classes>>
             <&'static str as IntoPropValue<Option<AttrValue>>>
             <&'static str as IntoPropValue<Option<String>>>
             <&'static str as IntoPropValue<String>>
             <&T as IntoPropValue<Option<T>>>
             <&T as IntoPropValue<T>>
             <Classes as IntoPropValue<AttrValue>>
           and 6 others
note: required by a bound in `MyPropsBuilder::<MyPropsBuilderStep_missing_required_prop_do_this>::do_this`
  --> src/main.rs:5:10
   |
5  | #[derive(yew::Properties, PartialEq)]
   |          ^^^^^^^^^^^^^^^ required by this bound in `MyPropsBuilder::<MyPropsBuilderStep_missing_required_prop_do_this>::do_this`
6  | pub struct MyProps {
7  |     pub do_this: fn(Event) -> (),
   |         ------- required by a bound in this
   = note: this error originates in the derive macro `yew::Properties` (in Nightly builds, run with -Z macro-backtrace for more info)

我可以实现IntoPropValue特性，但是仅仅将一个函数传递给子函数似乎有点额外。有更简单的方法吗？

Answer 1

一个简单的解决方案是使用红豆杉的Callback。下面是您如何使用上面的示例来实现的。

代码做了一些与上面不同的事情。

use yew::Callback

• it将MyProps中的fn(Event) -> ()更改为Callback<Event>

• it，通过执行Callback::from(do_this_func)

• to调用创建一个Callback --它使用的是emit，即do_this_func.emit(e)

这方面的完整代码如下所示并进行了注释

use log::info;
use yew::html::onclick::Event;
use yew::prelude::*;
use yew::Callback; // import Callback

#[derive(yew::Properties, PartialEq)]
pub struct MyProps {
    pub do_this: Callback<Event>, // change fn(Event) -> () to Callback<Event>
    pub val: String,
}

#[function_component(Base)]
pub fn home(props: &MyProps) -> Html {
    let do_this_func = props.do_this.clone();

    html! {
        // calls the emit method on the Callback 
        <button onclick={move |e: Event|  do_this_func.emit(e)}>  {"press me"} </button>
    }
}

#[function_component(App)]
pub fn app() -> Html {
    fn do_this_func(s: Event) {
        info!("clicked from my func")
    }


    // creates the callback with Callback::from
    let cb = Callback::from(do_this_func);
    html! {
        <Base do_this={cb} val={"hello".to_string()} />
    }
}

fn main() {
    wasm_logger::init(wasm_logger::Config::default());
    yew::start_app::<App>();
}