如何改变yew中子函数组件的状态？

Question

我正在使用 yew 框架用 Rust 编写一个 Web 应用程序。 我有一个 function_component

ImageViewer

，它允许人们查看、移动和缩放图像。 它内部有

offset

和

zoom

use_state 钩子。

我还有一个 function_component

App

，其中包含

ImageViewer

和用于重置其状态的按钮。

所以代码如下所示：

#[autoprops]
#[function_component]
pub fn ImageViewer(src: &String) -> Html {
    let zoom = use_state(|| 1.);
    let offset = use_state(|| (0., 0.));

    let onwheel = {
        let zoom = zoom.clone();
        Callback::from(move |e: WheelEvent| { /* update zoom */ })
    };

    let onmousemove = {
        let offset = offset.clone();
        Callback::from(move |e: MouseEvent| { /* update offset */ })
    };

    let image_style = use_style!(
        r#"
            transform: translate(${offset_x}px, ${offset_y}px) scale(${zoom});
            user-select: none;
        "#,
        zoom=*zoom,
        offset_x=(*offset).0,
        offset_y=(*offset).1,
    );

    html! {
        <div {onwheel} {onmousemove}>
            <img {src} class={image_style}/>
        </div>
    }
}

#[function_component]
pub fn App() -> Html {
    let onclick = Callback::from(|_| {
        // TODO: set ImageViewer.zoom to 1.
        // TODO: set ImageViewer.offset to (0., 0.)
    });

    html! {
        <div>
            <ImageViewer/>
            <button {onclick}>{"Reset image"}</button>
        </div>
    }
}

从

zoom

更改

offset

和

ImageViewer

的最佳方法是什么？是否可以以某种方式从

App

访问

ImageViewer

的

zoom

和

offset

或者从

App

调用某些

ImageViewer

的函数？

App

我想出的最好的解决办法就是搬家

---

ImageViewer

从 

let zoom = use_state(|| 1.);
let offset = use_state(|| (0., 0.));

到

ImageViewer

并使用

App

和

on_zoom_changed

回调更改它们。 但我不喜欢这个解决方案，因为

on_offset_changed

和

zoom

习惯上似乎是

offset

状态的一部分，而不是

ImageViewer

的状态。

Answer 1