riotjs 渲染 table 之外的嵌套标签行

Question

看到这个fiddle。

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

在检查生成的标记时，测试行呈现在 table 的外部。

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

Answer 1

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

如果将 testrow 包裹在 div

中

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

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

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

我建议打开一个新的 issue。

更新

没有怪癖，您呈现的结果只是无效标记。 Riot 2.3.17 引入了一个新的 data-is-attribute, which could resolve your issue:

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

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

额外小费

要检查 validity/correctness 的标记，只需将 riot-tag 包裹在 template-tag 中并检查其 innerHTML:

https://jsfiddle.net/aebo6zpg/

Answer 2

If I use nested s in this way, it renders as I expect - children of the elements. Is this by design? Or a quirk of the way rendering works internally with html tables?

最近我也花了两个小时。问题的根本原因是 'table' 的特殊之处在于它定义了自己的 formatting context，并且 TR 不能存在于它之外。虽然 riot 认为组件并构建它们的虚拟 DOM 没有依赖性（用户明确声明的那些除外）。 This 说明问题：

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

=> 您不能单独渲染 TR。

我没有遇到任何此类问题，顺便说一句，这是唯一一个你必须处理 yckart 已经给出的解决方法（？）。 alternative solution 将使用 CSS 顺便说一句，让 CSS 将嵌套的 div 结构可视化呈现为 table:

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

riotjs 渲染 table 之外的嵌套标签行

riotjs rendering nested tags rows outside of table

javascript

html

riot.js

更新

额外小费