红豆杉错误– ；只允许一个根html元素

我遇到了红豆杉库的组件机制的问题。如果我在主模型的html宏的宏中包含任何其他html代码，编译器会抱怨“只允许一个根html元素”

我的结构如下：

main.rs

impl Component for Model {
    // ...

    fn view(&self) -> Html<Self> {
        html! {
            <Navigation />
            <p>{ "Hello World!" }</p>
        }
    }
}

impl Component for Navigation {
    // ...

    fn view(&self) -> Html<Self> {
        html! {
            <nav class=("uk-navbar-container","uk-padding","uk-padding-remove-bottom","uk-padding-remove-top"), uk-navbar="">
                // ...
            </nav>
        }
    }
}

impl Component for Model {
    // ...

    fn view(&self) -> Html<Self> {
        html! {
            <div>
                <Navigation />
                <p>{ "Hello World!" }</p>
            </div>
        }
    }
}

impl模型组件{
// ...
fn视图（&self）->Html{
html{
{“你好，世界！”}

}
}
}

组件/导航.rs

impl Component for Model {
    // ...

    fn view(&self) -> Html<Self> {
        html! {
            <Navigation />
            <p>{ "Hello World!" }</p>
        }
    }
}

impl Component for Navigation {
    // ...

    fn view(&self) -> Html<Self> {
        html! {
            <nav class=("uk-navbar-container","uk-padding","uk-padding-remove-bottom","uk-padding-remove-top"), uk-navbar="">
                // ...
            </nav>
        }
    }
}

impl Component for Model {
    // ...

    fn view(&self) -> Html<Self> {
        html! {
            <div>
                <Navigation />
                <p>{ "Hello World!" }</p>
            </div>
        }
    }
}

impl导航组件{
// ...
fn视图（&self）->Html{
html{
// ...
}
}
}

---

我怀疑html宏在html标记周围添加了一个-tag或整个index.html，从而导致了“double”html标记。然而，我如何才能避免这种情况，或者在使用组件时我错过了什么？

编译器的抱怨是关于红豆杉

html宏必须有一个包含所有内容的元素

因此，修复错误的方法是简单地添加一个包装器元素，如下所示：

main.rs

impl Component for Model {
    // ...

    fn view(&self) -> Html<Self> {
        html! {
            <Navigation />
            <p>{ "Hello World!" }</p>
        }
    }
}

impl Component for Navigation {
    // ...

    fn view(&self) -> Html<Self> {
        html! {
            <nav class=("uk-navbar-container","uk-padding","uk-padding-remove-bottom","uk-padding-remove-top"), uk-navbar="">
                // ...
            </nav>
        }
    }
}

impl Component for Model {
    // ...

    fn view(&self) -> Html<Self> {
        html! {
            <div>
                <Navigation />
                <p>{ "Hello World!" }</p>
            </div>
        }
    }
}

impl模型组件{
// ...
fn视图（&self）->Html{
html{
{“你好，世界！”}

}
}
}

它不必是
div
，它可以是任何html元素。
编译器抱怨的是关于红豆杉
html宏必须有一个包含所有内容的元素

因此，修复错误的方法是简单地添加一个包装器元素，如下所示：

main.rs

impl Component for Model {
    // ...

    fn view(&self) -> Html<Self> {
        html! {
            <Navigation />
            <p>{ "Hello World!" }</p>
        }
    }
}

impl Component for Navigation {
    // ...

    fn view(&self) -> Html<Self> {
        html! {
            <nav class=("uk-navbar-container","uk-padding","uk-padding-remove-bottom","uk-padding-remove-top"), uk-navbar="">
                // ...
            </nav>
        }
    }
}

impl Component for Model {
    // ...

    fn view(&self) -> Html<Self> {
        html! {
            <div>
                <Navigation />
                <p>{ "Hello World!" }</p>
            </div>
        }
    }
}

impl模型组件{
// ...
fn视图（&self）->Html{
html{
{“你好，世界！”}

}
}
}

它不必是
div
，它可以是任何html元素。
如前所述，您需要包装它。Yew支持JSX，您可以这样做：

impl模型组件{
// ...
fn视图（&self）->Html{
html{
{“你好，世界！”}

}
}
}

我更喜欢这种方式，因为它不会向呈现的文档添加任何额外的HTML。
最终可能会破坏现有的CSS或JS。但是，如果您编写了一个全新的组件，那么每个组件始终只有一个包装HTML元素也是一个好主意（=使用div）。
如前面所述，您需要包装它。Yew支持JSX，您可以这样做：

impl模型组件{
// ...
fn视图（&self）->Html{
html{
{“你好，世界！”}

}
}
}

我更喜欢这种方式，因为它不会向呈现的文档添加任何额外的HTML。
最终可能会破坏现有的CSS或JS。但是，如果您编写了一个全新的组件，那么每个组件始终只有一个包装HTML元素也是一个好主意（=使用div）。
您可以将整个内容包装在
div
中吗？i、 在
main.rs
中将html更改为
..
@Prime\u Aqasix好的，是的，这就是问题所在-我不知道（或误读）这些html宏需要这样的封闭元素。如果你想加上这个作为答案，我会接受的。你能把整件事包装成一个
div
？i、 在
main.rs
中将html更改为
..
@Prime\u Aqasix好的，是的，这就是问题所在-我不知道（或误读）这些html宏需要这样的封闭元素。如果你想加上这个作为答案，我会接受的