Yew 错误 – 只允许一个根 html 元素

Yew error – only one root html element allowed

我遇到了 Yew 库的组件机制问题。如果我在主模型的 html 宏的宏中包含任何其他 html 代码,编译器会抱怨 "only one root html element allowed".

我的结构如下:

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 标签周围添加了一个 - 标签或整个 index.html,从而导致 "double" html标签。但是,如何避免这种情况或者我在使用组件时遗漏了什么?

编译器投诉是关于 yew html! 宏必须有一个包含所有内容的元素。

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

main.rs

impl Component for Model {
    // ...

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

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

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

impl Component for Model {
    // ...

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

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