Yew错误 - 只允许使用一个html根元素

Question

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

我的结构如下。

main.rs

impl Component for Model {
    // ...

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

componentsnavigation.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，从而导致 "双 "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元素。

Answer 2

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

impl Component for Model {
    // ...

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

我更喜欢这种方式，因为它不会在渲染的文档中添加任何HTML。A <div> 最终可能会破坏现有的CSS或JS。但如果你写了一个全新的组件，那么每个组件总是只有一个包装的HTML元素（=使用div）也是一个好主意。