Component Children
In some cases, you may wish to create a component that acts as a container for some other content, without the component needing to know what that content is. To achieve this, create a prop of type 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 } )) } }
Then, when rendering the component, you can pass in the output of 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")), } }) }
Note: Since
Element<'a>
is a borrowed prop, there will be no memoization.
Warning: While it may compile, do not include the same
Element
more than once in the RSX. The resulting behavior is unspecified.
The children
field
Rather than passing the RSX through a regular prop, you may wish to accept children similarly to how elements can have children. The "magic" children
prop lets you achieve this:
#![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 } )) } }
This makes using the component much simpler: simply put the RSX inside the {}
brackets – and there is no need for a render
call or another macro!
#![allow(unused)] fn main() { cx.render(rsx! { Clickable { href: "https://www.youtube.com/watch?v=C-M2hs3sXGo", "How to " i {"not"} " be seen" } }) }