javascript - 在ReactJS中动态创建数据表

在ReactJs中创建动态数据表有问题。在state.data中，我得到我的数据，然后循环创建数据表。
以下是我的渲染函数：

render: function() {
        return (
            <div>
                <table id="measurementsDataTable" className="row-border compact">
                    {
                        this.state.data.map(function(item) {
                            if( item.element == "th" ){
                                return (
                                    <thead>
                                        <tr>
                                            <ThElement width="280" data={item.description}/>
                                            <ThElement width="150" data={item.L1}/>
                                        </tr>
                                    </thead>
                                )
                            }
                            else if ( item.element == "tr" ) {
                                return (
                                    <tbody>
                                        <tr>
                                            <TdElement data={item.description}/>
                                            <TdElement data={item.L1}/>
                                        </tr>
                                    </tbody>
                                )
                            }
                        })
                    }

                </table>
            </div>
        );
    }

问题是元素“tbody”，它被赋予每个“tr”行。它应该在第一个“tr”到最后一个“tr”之间。
如果我能返回“tbody”的开头就不会有问题了，但react不允许这样。
有什么好的解决办法吗？
编辑：
当前是这样的HTML。所有的区别在于“tbody”元素。

<table>
<thead>
    <tr>
        <th>Phase</td>
        <th>L1</td>
    </tr>
</thead>
<tbody>
    <tr>
        <td>Voltage</td>
        <td>224.2</td>
    </tr>
</tbody>
<tbody>
    <tr>
        <td>Current</td>
        <td>0.00 mA</td>
    </tr>
</tbody>
<thead>
    <tr>
        <th>Phase 2</td>
        <th>L2</td>
    </tr>
</thead>
<tbody>
    <tr>
        <td>Voltage2</td>
        <td>223.2</td>
    </tr>
</tbody>
<tbody>
    <tr>
        <td>Current2</td>
        <td>0.00 mA</td>
    </tr>
</tbody>

应该是这样的：

<table>
<thead>
    <tr>
        <th>Phase</td>
        <th>L1</td>
    </tr>
</thead>
<tbody>
    <tr>
        <td>Voltage</td>
        <td>224.2</td>
    </tr>
    <tr>
        <td>Current</td>
        <td>0.00 mA</td>
    </tr>
</tbody>
<thead>
    <tr>
        <th>Phase 2</td>
        <th>L2</td>
    </tr>
</thead>
<tbody>
    <tr>
        <td>Voltage2</td>
        <td>223.2</td>
    </tr>
    <tr>
        <td>Current2</td>
        <td>0.00 mA</td>
    </tr>
</tbody>

最佳答案

您可以使用Array.prototype.reduce（）按标题对数据进行分组，然后创建适当的元素：

render: function() {

    var tableElements = this.state.data.reduce(function(grouped, item) {
        if (item.element == "th") {
            grouped.push({
                header: item,
                rows: []
            });
        } else {
            grouped[grouped.length - 1].rows.push(item);
        }
        return grouped;
    }, []).reduce(function(elements, item) {
        elements.push(<thead>
                          <tr>
                              <ThElement width="280" data={item.header.description}/>
                              <ThElement width="150" data={item.header.L1}/>
                          </tr>
                      </thead>);
        elements.push(<tbody>
                      {
                          item.rows.map(function(row) {
                              return (<tr>
                                          <TdElement data={row.description}/>
                                          <TdElement data={row.L1}/>
                                      </tr>);
                          });
                      }
                      </tbody>);
        return elements;

    }, []);

    return (
        <div>
            <table id="measurementsDataTable" className="row-border compact">
            { tableElements }
            </table>
        </div>
    );
}