How to render dynamic tag names inside the view! macro?

[wtho]

Yew uses html! { <@{format!("h{}", level)} class="title">{ text }</@> } to render dynamic tag names.

Is there a way in leptos to achieve the same?

Oh, just realised there's another discussions thread asking the same question: #438

[gbj]

Hi — I had missed that post but theirs was actually about rendering different components dynamically, not different elements.

Because we have typed elements we don't have quite this level of flexibility, but there are two options

1. use normal Rust conditional logic and use .into_any() to convert from HtmlElement<T> and HtmlElement<U> to HtmlElement<AnyElement>

if some_condition {
  view! { cx, <div class="title">{&text}</div> }.into_any()
} else {
  view! { cx, <p class="title">{&text}</p> }.into_any()
}

2. use our (less-well-documented) builder pattern — see here for an example

let el = if level == 1 {
  h1(cx).into_any()
} else if level == 2 {
  h2(cx).into_any()
};
el.class("title").child(text)

[wtho]

Ok, my use-case was actually to take any element (thought first as str, eg "p" or "a") as prop and then render the element corresponding to the string as html element.

My solution, as it will be only p and a in my case, is to use an enum, but I thought even better would be to pass the leptos::html::element to the component: tag=leptos::html::a

But I couldn't get it to work yet, still too new at rust. If this could work somehow, it might be a good example.

[gbj]

If you want to take any element as a prop, then you should take the type HtmlElement<AnyElement> for the prop, and call .into_any() on the things you pass into it

use leptos::html::AnyElement;

#[component]
fn TakesAny(cx: Scope, element: HtmlElement<AnyElement>) -> impl IntoView {
    view! { cx,
        <div>
            {element}
        </div>
    }
}

used as

view! { cx,
        <div>
            <TakesAny element=view! { cx, <p>"Test"</p>}.into_any()/>
        </div>
    }

[trailskr]

What if I want to choose between element and component like router "A" component or custom one? Like:

if some_condition {
    view! { cx, <button>{inner}</button> }.into_any()
} else {
    view! { cx, <A>{inner}</A> } // has no function into_any...
}

[gbj]

What if I want to choose between element and component like router "A" component or custom one? Like:

if some_condition {

    view! { cx, <button>{inner}</button> }.into_any()

} else {

    view! { cx, <A>{inner}</A> } // has no function into_any...

}

.into_view(cx)

See https://leptos-rs.github.io/leptos/view/06_control_flow.html#note-type-conversions

[trailskr]

Thanks a lot!