在 React 中使用 thead 和 tbody 标签循环数组

Question

我正在尝试在反应中添加 thead 和 tbody 标签到我的表中。源数据是一个数组，其中第一个索引包含标头，其余索引是表正文。

return (
<div>
{index == 1 && <tbody>}
<tr key={index}>
{tableData(false, row.value)}
</tr>
{index == pivot.data.table.length && </tbody>}
</div>
);

在上面的循环中，我在{index == pivot.data.table.length && </tbody>}处得到了意想不到的令牌

完整的代码和沙盒如下：

import React, { Component } from "react";
import { render } from "react-dom";
import Pivot from "quick-pivot";
import { Table } from 'react-bootstrap';
class PivotTable extends Component {
constructor(props) {
super(props);
}
createTable() {
const dataArray = [
["name", "gender", "house", "age"],
["Jon", "m", "Stark", 14],
["Arya", "f", "Stark", 10],
["Cersei", "f", "Baratheon", 38],
["Tywin", "m", "Lannister", 67],
["Tyrion", "m", "Lannister", 34],
["Joffrey", "m", "Baratheon", 18],
["Bran", "m", "Stark", 8],
["Jaime", "m", "Lannister", 32],
["Sansa", "f", "Stark", 12]
];
const rowsToPivot = ["name"];
const colsToPivot = ["house", "gender"];
const aggregationDimension = "age";
const aggregator = "sum";
const pivot = new Pivot(
dataArray,
rowsToPivot,
colsToPivot,
aggregationDimension,
aggregator
);
console.log("pivot.data", pivot.data, "pivot.data.table", pivot.data.table);
const tableData = (heading, row) => {
return row.map(cell => {
if (heading) {
return (
<th>
{cell}
</th>
);
} else {
return (
<td>
{cell}
</td>
);
}
});
};
return pivot.data.table.map((row, index) => {
if (index == 0) {
return (
<thead>
<tr key={index}>
{tableData(true, row.value)}
</tr>
</thead>
);
} else {
return (
<div>
{index == 1 && <tbody>}
<tr key={index}>
{tableData(false, row.value)}
</tr>
{index == pivot.data.table.length && </tbody>}
</div>
);
}
});
}
render() {
return (
<table>
{this.createTable()}
</table>
);
}
}
render(<PivotTable />, document.getElementById("root"));

沙盒： https://codesandbox.io/s/vgDE6rOEM

我该如何解决这个问题？

我认为最简单的方法是创建一个单独的函数，该函数再次调用数据，创建一个新数组并仅创建标题。当我这样做时，问题是它可能会大大降低性能。

我可以在一个电话中完成所有这些功能，或者解决此问题的最佳方法是什么？

Answer 1

我通常对此类模式使用三元运算符，请尝试：

return (
<div>
{index == 1 ? <tbody> : <div />}
<tr key={index}>
{tableData(false, row.value)}
</tr>
{index == pivot.data.table.length ? </tbody> : <div />}
</div>
);

Answer 2

我已经找到了解决方案：

import React, { Component } from 'react';
import Pivot from 'quick-pivot';
import { Table } from 'react-bootstrap';
export default class PivotTable extends Component {
constructor(props) {
super(props);
}

getGapData 在准备就绪时获取数据。如果没有，它将返回字符串"加载"。

getGapData() {
//const dataArray = [
//['name', 'gender', 'house', 'age'],
//['Jon', 'm', 'Stark', 14],
//['Arya', 'f', 'Stark', 10],
//['Cersei', 'f', 'Baratheon', 38],
//['Tywin', 'm', 'Lannister', 67],
//['Tyrion', 'm', 'Lannister', 34],
//['Joffrey', 'm', 'Baratheon', 18],
//['Bran', 'm', 'Stark', 8],
//['Jaime', 'm', 'Lannister', 32],
//['Sansa', 'f', 'Stark', 12],
//];
if (this.props.ready) {
const dataArray = this.props.data;
const rowsToPivot = ['index'];
const colsToPivot = ['period'];
const aggregationDimension = 'visits';
const aggregator = 'sum';
const pivot = new Pivot(
dataArray,
rowsToPivot,
colsToPivot,
aggregationDimension,
aggregator
);
//this.setState({ headerData: pivot.data.table[0] });
//this.setState({bodyData: pivot.data.table.slice(1) });
return pivot.data.table;
} else {
return 'loading';
}
}

在 render(( 返回之前，我们执行 getGapData 函数。只需执行一次。

我正在使用切片和数组的第一个索引来显示头部和身体数据。我可以用 thead 和 tbody 标签包装这段代码来解决我的问题。

render() {
console.log(this.getGapData());
const gap = this.getGapData();
return (
<Table striped bordered condensed hover>
<thead>
<tr>
{gap != 'loading' &&
gap[0].value.map(data => {
return (
<th>
{data}
</th>
);
})}
</tr>
</thead>
<tbody>
{gap != 'loading' &&
gap.slice(1).map(row => {
return (
<tr>
{row.value.map(data => {
return (
<td>
{data}
</td>
);
})}
</tr>
);
})}
</tbody>
</Table>
);
}
}