html - Yew 错误 – 只允许一个根 html 元素
问题描述
我遇到了 Yew 库的组件机制的问题。如果我在主模型的 html 宏的宏中包含任何其他 html 代码,编译器会抱怨“只允许一个根 html 元素”。
我的结构如下:
main.rs
impl Component for Model {
// ...
fn view(&self) -> Html<Self> {
html! {
<Navigation />
<p>{ "Hello World!" }</p>
}
}
}
组件/导航.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 标签。但是,我怎样才能避免这种情况,或者在使用组件时我错过了什么?
解决方案
如前所述,您需要将其包装起来。Yew 支持 JSX,你可以这样做:
impl Component for Model {
// ...
fn view(&self) -> Html<Self> {
html! {
<>
<Navigation />
<p>{ "Hello World!" }</p>
</>
}
}
}
我更喜欢这种方式,因为它不会向呈现的文档添加任何额外的 HTML。A<div>
最终可能会破坏现有的 CSS 或 JS。但是,如果您编写一个全新的组件,那么每个组件始终只有一个包装 HTML 元素(=使用 div)也是一个好主意。
推荐阅读
- c# - c# NetworkStream BeginRead 看似覆盖字节
- python - Python - Raspberry pi GPIO 到 SQlite3 - 带时间戳的高/Lov
- php - 如何在 Json 响应中添加密钥?
- vba - 访问图片类型内联对象中的图表数据
- linux - 使用 ioctl SIOCGIWSCAN 进行 wifi 扫描
- html - IE 11:最小高度的元素:100vh 将导致滚动条
- azure - 在不同的父模板中引用相同的链接模板
- python - 如何从行列表中删除最后一行
- php - MockObject 属性在构造函数后被清除
- asp.net-core - 递归地从具有 ef-core 的自引用多对多对象中获取所有子对象