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中添加跨度。

我相信我不是增加一个跨度。但是我相信当没有行时（当第一次调用render时），看起来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>