reactjs表呈现 - 如何处理tbody的空行呈现

Question

我对ReactJS很新，并且正在玩弄它的交易技巧。我正在尝试用thead和tbody创建一个简单的表。

我的代码如下所示：

/**
 * creates a HTML table to show requirements
 **/
var ReqTable = React.createClass({
  render: function() {

    var rows = []; 
    rows = this.props.data.map(function(row) {
      return ( <ReqRow row={row} />);
    }); 

    return(
      <table className="reqTable table table-bordered table-striped">
        <thead>
        <tr>
        <th>REQ #</th>
        <th>Short Desc</th>
        <th>Long Description</th>
        </tr>
        </thead>
        <tbody> {rows} </tbody>
      </table>
    );  
  }
});

我正在使用ajax调用来获取行并呈现此表。这总体上很好，但在浏览器控制台中发出警告，表示您无法在tbody中添加跨度。

我确信我没有添加跨度。但我相信当没有行时（第一次调用渲染时），似乎reactJS试图在tbody内部渲染一个span。

那么，我应该在这里进行if检查以避免渲染范围吗？最后，在tbody中呈现一组空行的正确方法是什么？

Answer 1

您的tbody数组之前和之后，您的rows元素的子元素是空格字符：

<tbody> {rows} </tbody>

编译为：

React.createElement("tbody", null, " ", rows, " ");

由于DOM的限制，当DOM组件有多个子节点时，React会将其所有文本子节点包装在<span>个元素中。所以上面的JSX相当于：

<tbody><span> </span>{rows}<span> </span></tbody>

要解决此问题，只需删除多余的字符：

<tbody>{rows}</tbody>