Componente Filhos

Em alguns casos, você pode desejar criar um componente que atue como um contêiner para algum outro conteúdo, sem que o componente precise saber qual é esse conteúdo. Para conseguir isso, crie uma prop do tipo Element:

#![allow(unused)]
fn main() {
#[derive(Props)]
struct ClickableProps<'a> {
    href: &'a str,
    body: Element<'a>,
}

fn Clickable<'a>(cx: Scope<'a, ClickableProps<'a>>) -> Element {
    cx.render(rsx!(
        a {
            href: "{cx.props.href}",
            class: "fancy-button",
            &cx.props.body
        }
    ))
}
}

Então, ao renderizar o componente, você pode passar a saída de cx.render(rsx!(...)):

#![allow(unused)]
fn main() {
    cx.render(rsx! {
        Clickable {
            href: "https://www.youtube.com/watch?v=C-M2hs3sXGo",
            body: cx.render(rsx!("How to " i {"not"} " be seen")),
        }
    })
}

Nota: Como Element<'a> é uma prop emprestado, não haverá memoização.

Atenção: Embora possa compilar, não inclua o mesmo Element mais de uma vez no RSX. O comportamento resultante não é especificado.

O Campo children

Em vez de passar o RSX através de uma prop regular, você pode querer aceitar filhos da mesma forma que os elementos podem ter filhos. O prop "mágico" children permite que você consiga isso:

#![allow(unused)]
fn main() {
#[derive(Props)]
struct ClickableProps<'a> {
    href: &'a str,
    children: Element<'a>,
}

fn Clickable<'a>(cx: Scope<'a, ClickableProps<'a>>) -> Element {
    cx.render(rsx!(
        a {
            href: "{cx.props.href}",
            class: "fancy-button",
            &cx.props.children
        }
    ))
}
}

Isso torna o uso do componente muito mais simples: basta colocar o RSX dentro dos colchetes {} – e não há necessidade de uma chamada render ou outra macro!

#![allow(unused)]
fn main() {
    cx.render(rsx! {
        Clickable {
            href: "https://www.youtube.com/watch?v=C-M2hs3sXGo",
            "How to " i {"not"} " be seen"
        }
    })
}