html - 紫杉醇错误–仅允许一个根html元素

Question

我在Yew库的组件机制中遇到了问题。如果我在主模型的html宏的宏中包括其他任何html代码，则编译器会提示“仅允许一个根html元素”。

我的结构如下:

main.rs

impl Component for Model {
    // ...

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

组件/navigation.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或整个index.html，从而导致了“double” html标签。但是，如何避免这种情况或在使用组件时错过了什么呢？

Answer 1

编译器提示是yew html!宏必须包含一个包含所有内容的元素。

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

main.rs

impl Component for Model {
    // ...

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

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