Javascript 如何在React bootstrap中创建包含多行单元格的表？

我想创建一个表格，其中一些单元格包含几行。 如果我这样做，那就是工作：

               <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>

日期
分析ID
分析名称
解决变化
日期
身份证件
名称
决断
身份证件
名称
决断

我明白了：

---

现在我想在一个组件中添加我的3个“TR”标记，因为在我想使用for cycle创建许多这样的组件之后。但组件必须在一个关闭的标记中返回内容。我试图将我的3个“tr”包含在一个父级“tr”中，但出现了错误。在这里我能做什么？

如果不将三个元素包装到另一个元素（如

div

）中，就无法创建返回三个元素的React组件。否则，将出现以下错误：

必须返回有效的组件。您可能返回了未定义、数组或其他无效对象。

您的案例有点特殊，因为您不能将

div

作为

表

或

tbody

的直接子项，所以这是一个问题

但是，您可以做的是创建一个返回数组的类函数。像这样：

MyApp类扩展了React.Component{ getter=（）=>{ 返回[ 日期 , 身份证件 名称 决断 , 身份证件 名称 决断 ]; } render（）{ 返回( 日期 分析ID 分析名称 解决变化 {this.getr（）} {this.getr（）} {this.getr（）} ); } } ReactDOM.render（，document.getElementById（“app”）

---

您需要在一个div标记中包含tr标记。 正确的rowSpan方法如下：

var MyRow = React.createClass({
  render: function () {
    return (
        <div>
            <tr>
              <td rowSpan="2">{this.props.item.date}</td>
              <td>{this.props.item.data[0].id}</td>
              <td>{this.props.item.data[0].name}</td>
              <td>{this.props.item.data[0].solve}</td>
            </tr>
            <tr>
              <td>{this.props.item.data[1].id}</td>
              <td>{this.props.item.data[1].name}</td>
              <td>{this.props.item.data[1].solve}</td>
            </tr>
        </div>
    );
  }
});

var MyRow=React.createClass({
渲染：函数（）{
返回(
{this.props.item.date}
{this.props.item.data[0].id}
{this.props.item.data[0].name}
{this.props.item.data[0].solve}
{this.props.item.data[1].id}
{this.props.item.data[1].name}
{this.props.item.data[1].solve}
);
}
});

---

这是我的工作示例：

我认为这里不需要

箭头函数
getter=（）=>{
，
这个.getter（）
是一个正常的方法调用。@MayankShukla，事实上，它不是。只是个人喜好。