如何在 React-bootstrap 中创建带有多行单元格的表格? [英] How to create table with multiline cells in React-bootstrap?
问题描述
我想创建一些单元格包含多行的表格.如果我这样做就行了:
I want to create table where some cells contain several lines. It's work if I do it:
<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>
我明白了:多行单元格表格
现在我想在一个组件中添加我的 3 个TR"标签,因为在我想使用 for-cycle 创建许多这样的组件之后.但是组件必须返回一个封闭标签中的内容.我试图将我的 3 个tr"包含在一个父tr"中,但出现错误.我可以在这里做什么?
And now I want to add my 3 "TR" tags in one component, because after I want use for-cycle to create many such components. But components must return content in one closed tag. I tried to contain my 3 "tr" in one parent "tr", but I got error. What can I do here?
推荐答案
创建一个返回三个元素的 React 组件而不将它们包装在另一个元素中是不可能的,例如 div
.否则,您将收到以下错误:
It is not possible to create a React Component that returns three elements without wrapping them in another element, such as a div
. Otherwise, you'll get the following error:
A valid ReactComponent must be returned. You may have returned undefined, an array or some other invalid object.
您的情况有点特殊,因为您不能将 div
作为 table
或 tbody
的直接子代,所以有问题...
Your case here is a bit special, because you cannot have div
's as the immediate child of table
or tbody
, so that's a problem...
您可以做的是创建一个返回数组的类函数.像这样:
What you can do however, is to create a class function that returns an array. Like this:
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>
这篇关于如何在 React-bootstrap 中创建带有多行单元格的表格?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!