How to replace dyn child?

[Rick9622092]

The code "icon_node = Some(Box(node));" is error:error[E0423]: cannot initialize a tuple struct which contains private fields
And the code as the following:

#[component]
pub fn Button<F>(
    cx: Scope,
     #[prop(optional)]
    block: bool,   
    children: Box<dyn Fn(Scope) -> Fragment>,    
     #[prop(optional)]
    disabled: bool,
    #[prop(optional)]
    ghost: bool,
    #[prop(optional)]
    href: String,
    #[prop(optional)]
    icon: Option<Box<dyn Fn(Scope) -> View>>,
    #[prop(optional)]
    loading: bool,
    #[prop(optional)]
    shape: Shape,
    #[prop(optional)]
    size: SizeEnum,
    #[prop(optional)]
    suffix: Option<Box<dyn Fn(Scope) -> View>>,
    #[prop(optional)]
    tag: ButtonTag,
    #[prop(optional)]
    theme: ButtonTheme,
    #[prop(optional)]
    r#type: ButtonType,
    #[prop(optional)]
    variant:ButtonVariant,
    #[prop(optional)]
    on_click: Option<F>,
)-> impl IntoView
where
    F: Fn(MouseEvent) + 'static,
 {
    let class_prefix = CLASS_PREFIX;
    let mut icon_node = icon;    
    if loading{
        let node = view! {cx,
            <Loading loading inherit_color=true/>
            };

        icon_node = Some(Box(node));
    }
   ........

[gbj]

Okay, so I'm going to iterate through a few steps in order so you can see how I'd solve this.

1. The original error is about Some(Box(node)). You'll notice the error is on Box in particular. Basically, this isn't how you box something in Rust: you want Box::new().

icon_node = Some(Box::new(node));

2. A new error: progress! Now it gives an error on the whole Box::new(node)

expected a `std::ops::Fn<(leptos::Scope,)>` closure, found `impl leptos::IntoView`

Again, this makes sense: the type of icon_node is Box<dyn Fn(Scope) -> View>. You've tried to assign a Box<impl IntoView>. Maybe what you meant was something more like

icon_node = Some(Box::new(move |cx| node.into_view(cx)));

3. Uh-oh! A new error:

cannot move out of `node`, a captured variable in an `Fn` closure
move occurs because `node` has type `impl leptos::IntoView`, which does not implement the `Copy` trait

This one seems hard, but is easy. Instead of creating the node outside the function, create it inside the function. Now every time icon_node is called, you render a <Loading loading inherit_color=true/>.

        icon_node = Some(Box::new(move |cx| {
            view! {cx,
                <Loading loading inherit_color=true/>
            }
            .into_view(cx)
        }));

4. This now compiles. Yay! However, I'm worried that it's not going to do what you're intending it to do.

Specifically: component props are not reactive unless they are signal types. There's no magic happening at the component boundary that causes the component to react to changes in the values fed into its properties. Instead, the component function runs once and sets up a reactive UI.

So unless I'm misunderstanding what you'd want to use this for, some of the fields—I'm thinking loading at the very least—should be more like

#[prop(into)]
loading: Signal<bool>,

This means you can pass in a ReadSignal<bool> or RwSignal<bool> or Signal::derive(move || /* something */) and the button will react to changes in the loading prop. Otherwise, your button will permanently be either "loading" or "not loading."

That would mean you could do something like

  // make it a closure so `icon_node` is reactive
  let icon_node = move || {
        // because loading is a Signal now, call it
        if loading() {
            Some(view! { cx, <Loading loading inherit_color=true/> }.into_view(cx))
        } else {
            icon.map(|icon| icon(cx))
        }
    };