地图兄弟thead＆amp; React中的tbody元素

Question

我遇到了一个需要在循环中吐出兄弟<thead> <tbody>对的情况，但是添加一个包装组件会引发一个不正确的dom警告。

stuff.map(x =>
  <span>
    <thead>
      ...
    </thead>

    <tbody>
      ...
    </tbody>
  </span>
)

所需：

<table>
  <thead>top level columns</thead>
  <thead>...</thead>
  <tbody>...</thead>
  <thead>...</thead>
  <tbody>...</tbody>
</table>

包装跨度抛出“span不能是表的子”警告。有没有办法在没有多个表的情况下这样做？

Answer 1

编辑：我没有看到你先得到的警告 - 但仍然 - 每个规范都不允许在一个表中使用多个thead元素。

参考：http://www.w3.org/TR/html-markup/table.html#table

  

允许的内容

     

可选标题元素，后跟零或   更多colgroup元素，后跟一个可选的thead元素，后跟

     

<强>或者

     

一个tfoot元素，然后是零个或多个tbody   元素

     

或

     

一个或多个tr元素或零个或多个tbody元素，   或者一个或多个tr元素后跟一个可选的tfoot元素

您可能希望找到一种不同的方式来获得所需的样式，例如在行上使用类。

Answer 2

显然你可以返回元素数组！

stuff.map(x =>
  [
    <thead>
      ...
    </thead>,

    <tbody>
      ...
    </tbody>
  </span>
])