What is the Syntactically Correct Way To Nest Components?

[mcmah309]

What is the syntactically correct way to nest components? Given

#[component]
pub fn CodeBlock(element: Element, raw: &'static str)  -> Element {
    ...
}

and

#[component]
pub fn LeftRightEndlessAutoScroll(
    elements: Vec<VNode>,
    ltr: bool,
    duration_ms: u32,
    item_width_px: u16,
    item_height_px: u16,
) -> Element {
    ...
}

I want to do something like this

#[component]
pub fn LeftRightEndlessAutoScrollExample() -> Element {
    let elements: Vec<VNode> = vec![
        rsx! {div{style: "background-color: #e11d48; border-radius: 6px;", "1"}}?,
        rsx! {div{style: "background-color: #e11d48; border-radius: 6px;", "2"}}?,
        rsx! {div{style: "background-color: #e11d48; border-radius: 6px;", "3"}}?,
        rsx! {div{style: "background-color: #e11d48; border-radius: 6px;", "4"}}?,
        rsx! {div{style: "background-color: #e11d48; border-radius: 6px;", "5"}}?,
        rsx! {div{style: "background-color: #e11d48; border-radius: 6px;", "1"}}?,
        rsx! {div{style: "background-color: #e11d48; border-radius: 6px;", "2"}}?,
        rsx! {div{style: "background-color: #e11d48; border-radius: 6px;", "3"}}?,
        rsx! {div{style: "background-color: #e11d48; border-radius: 6px;", "4"}}?,
        rsx! {div{style: "background-color: #e11d48; border-radius: 6px;", "5"}}?,
        rsx! {div{style: "background-color: #e11d48; border-radius: 6px;", "1"}}?,
        rsx! {div{style: "background-color: #e11d48; border-radius: 6px;", "2"}}?,
        rsx! {div{style: "background-color: #e11d48; border-radius: 6px;", "3"}}?,
        rsx! {div{style: "background-color: #e11d48; border-radius: 6px;", "4"}}?,
        rsx! {div{style: "background-color: #e11d48; border-radius: 6px;", "5"}}?,
    ];
    let raw = r#"
            rsx! {
                LeftRightEndlessAutoScroll {
                    elements,
                    ltr: false,
                    duration_ms: 100000,
                    item_width_px: 200,
                    item_height_px: 200,
                }
            }
    "#;
    rsx! {
        CodeBlock {
            element: LeftRightEndlessAutoScroll {
                elements,
                ltr: false,
                duration_ms: 100000,
                item_width_px: 200,
                item_height_px: 200,
            },
            raw
        }
    }
}

But it doesn't work.

[mcmah309]

Found the answer. You need another rsx! {} block inside or use the "magic" children property on for CodeBlock

https://dioxuslabs.com/learn/0.6/reference/component_props#component-children