How to create table with multiline cells in React-

问题:

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>

I got it: Table with multiline cell

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?

回答1:

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.

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>

回答2:

You need to include tr tags in one div tag. The right way to rowSpan is this:

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>
    );
  }
});

This is my working example: http://jsfiddle.net/andrea689/e33pd14L/