如何在 React-bootstrap 中创建带有多行单元格的表格？

IT技术 javascript twitter-bootstrap reactjs react-redux
2021-05-04 23:16:46

我想创建一些单元格包含多行的表格。如果我这样做就行了：

               <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”中，但出现错误。我可以在这里做什么？

2个回答

不可能创建一个返回三个元素的 React 组件而不将它们包装在另一个元素中，例如div. 否则，您将收到以下错误：

A valid ReactComponent must be returned. You may have returned undefined, an array or some other invalid object.

您这里的情况有点特殊，因为您不能将div's 作为tableor的直接子代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>

您需要在一个 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>
    );
  }
});

这是我的工作示例：http : //jsfiddle.net/andrea689/e33pd14L/

其它你可能感兴趣的问题
上一篇Axios 被 Django REST 框架的 CORS 策略阻止 下一篇如何将数组与 setState 一起使用？