javascript - riotjs 渲染表格外的嵌套标签行

Question

看到这个小提琴。

有一个父<table>html 标记和嵌套的自定义 riot 标记来构建行。

在检查生成的标记时，测试行呈现在表格之外。

如果我以这种方式使用嵌套<div />的 s，它会按我的预期呈现 - 元素的子元素。这是设计使然吗？或者渲染在内部与 html 表一起工作的方式的怪癖？

Answer 1

对我来说似乎是一个错误，即使您使用最新的 riot 版本2.4.1，您testrow也不会在table-element 中呈现。

testrow如果你把div

<div>
  <testrow></testrow>
</div>

...它按应有的方式呈现：

<div>
  <testrow><tr> <td>1</td> </tr></testrow>
</div>

我建议开一个新问题。

更新

没有怪癖，您呈现的结果将只是无效标记。Riot2.3.17引入了一个新的data-is属性，可以解决您的问题：

<table>
  <tbody data-is="testrow"></tbody>
</table>

https://jsfiddle.net/v5ytp918/4/

额外小费

要检查标记的有效性/正确性，只需将 riot-tag 包装在template-tag 中并检查其innerHTML：

https://jsfiddle.net/aebo6zpg/

Answer 2

如果我以这种方式使用嵌套的 s，它会按我的预期呈现 - 元素的子元素。这是设计使然吗？或者渲染在内部与 html 表一起工作的方式的怪癖？

最近也花了我两个小时。问题的根本原因是 'table' 的特殊之处在于它定义了自己的格式化上下文，并且 TR 不能存在于它之外。而 riot 考虑组件并构建它们的虚拟 DOM 时没有依赖关系（用户明确声明的除外）。 这说明了问题：

> let el = document.createElement('div')
> el.innerHTML = "<tr><td>foo</td><td>bar</td></tr>"
> el.innerHTML
"foobar"

=> 你不能独立渲染 TR。

我没有偶然发现任何此类问题，顺便说一句，这是您必须处理的唯一一个解决方法（？），正如 yckart 已经给出的那样。另一种解决方案是使用 CSS btw，让 CSS 将嵌套的 div 结构直观地呈现到表格中：

You can also use CSS to emulate tables if you need to. display: table display: table-row display: table-cell