Yew错误- only允许一个根html元素

Question

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

我的结构如下：

main.rs

impl Component for Model {
    // ...

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

components/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

编译器抱怨的是酵母html!宏必须有一个包含所有内容的元素。

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

main.rs

impl Component for Model {
    // ...

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

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

Answer 2

正如前面提到的，您需要包装它。Yew支持JSX，您可以这样做：

impl Component for Model {
    // ...

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

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