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

Question

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

我的结构如下：

main.rs

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

组件/导航.rs

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>
}
}
}

我怀疑 html 宏在 html 标签周围添加了 -tag 或整个索引.html从而导致"双"html 标签。但是，我怎样才能避免这种情况，或者在使用组件时我错过了什么？

Answer 1

如前所述，您需要包装它。Yew 支持 JSX，你可以这样做：

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

我更喜欢这种方式，因为它不会向呈现的文档添加任何其他 HTML。<div>最终可能会破坏现有的CSS或JS。但是，如果您编写一个全新的组件，则每个组件始终只有一个包装HTML元素也是一个好主意(=使用div(。

Answer 2

编译器的抱怨是关于红豆杉的html!宏必须有一个元素来包围所有内容。

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

main.rs

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

它不一定是div，它可以是任何html元素。