我想创建一些单元格包含多行的表格。 如果我这样做,那就有用了:
<Table bordered>
<thead>
<tr>
<th>Date</th>
<th>Analysed ID</th>
<th>Analysed Name</th>
<th>Solve To change</th>
</tr>
</thead>
<tbody>
<tr>
<td rowSpan="3">Date</td>
</tr>
<tr>
<td>ID</td>
<td>Name</td>
<td>Decision</td>
</tr>
<tr>
<td>ID</td>
<td>Name</td>
<td>Decision</td>
</tr>
</tbody>
</Table>
我明白了: Table with multiline cell
现在我想在一个组件中添加 3 个“TR”标签,因为我想使用 for-cycle 创建许多这样的组件。但组件必须在一个封闭标签中返回内容。我试图将我的 3 个“tr”包含在一个父“tr”中,但出现错误。我在这里能做什么?
最佳答案
不可能创建一个返回三个元素而不将它们包装在另一个元素(例如 div
)中的 React 组件。否则,您将收到以下错误:
A valid ReactComponent must be returned. You may have returned undefined, an array or some other invalid object.
您的情况有点特殊,因为您不能将 div
作为 table
或 tbody
的直接子级,所以这就是有问题...
但是,您可以做的是创建一个返回数组的类函数。像这样:
class MyApp extends React.Component {
getTr = () => {
return [
<tr key={0}>
<td rowSpan="3">Date</td>
</tr>,
<tr key={1}>
<td>ID</td>
<td>Name</td>
<td>Decision</td>
</tr>,
<tr key={2}>
<td>ID</td>
<td>Name</td>
<td>Decision</td>
</tr>
];
}
render() {
return (
<table className="table">
<thead>
<tr>
<th>Date</th>
<th>Analysed ID</th>
<th>Analysed Name</th>
<th>Solve To change</th>
</tr>
</thead>
<tbody>
{this.getTr()}
{this.getTr()}
{this.getTr()}
</tbody>
</table>
);
}
}
ReactDOM.render(<MyApp />, document.getElementById("app"));
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>
关于javascript - 如何在 React-bootstrap 中创建包含多行单元格的表格?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44694024/