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

Posted 2023-02-23

【中文标题】Yew 错误 - 只允许一个根 html 元素

【英文标题】：Yew error – only one root html element allowed

【发布时间】：2020-04-23 00:19:12

【问题描述】：

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

我的结构如下：

ma​​in.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，从而导致了“双”html 标记。但是，我怎样才能避免这种情况，或者在使用组件时我错过了什么？

【问题讨论】：

你能把整个东西包在div中吗？即在main.rs中将html更改为<div><Navigation /><p>...</p><div>

@Prime_Aqasix 好的，是的，这就是问题所在——我不知道（或误读）这些 html 宏需要这样的封闭元素。如果你想添加这个作为答案，我会接受它

【参考方案1】：

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

impl Component for Model 
    // ...

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

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

【参考方案2】：

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

所以修复错误的方法是简单地添加一个包装器元素，如下所示：

ma​​in.rs

impl Component for Model 
    // ...

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

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