Javascript '；必须返回有效的React元素（或null）'；ReactJS中的一个组件出错

我的代码是这样的

var data = [
    {id: 1, taskName: "Pete Hunt", standarDescription: "This is one comment", emplComment: "meaaow I am meeawo", empRating : "1"},
    {id: 2, taskName: "Pete Hunt", standarDescription: "This is one comment", emplComment: "meaaow I am meeawo", empRating : "1"},
    {id: 3, taskName: "Pete Hunt", standarDescription: "This is one comment", emplComment: "meaaow I am meeawo", empRating : "1"},
    {id: 4, taskName: "Pete Hunt", standarDescription: "This is one comment", emplComment: "meaaow I am meeawo", empRating : "1"},
    {id: 5, taskName: "Pete Hunt", standarDescription: "This is one comment", emplComment: "meaaow I am meeawo", empRating : "1"}
];

var Tableforbasictask = React.createClass({
  render: function() {
    return (
     <div className="downloadlinks">
      <table className="table table-bordered table-striped-col nomargin" id="table-data">
      <tbody>
        <tr align="center">
            <td>Task  Name</td>
            <td>Standard Discription of Task</td>
            <td>Employee Comment</td>
            <td>Employee rating</td>
        </tr>
        <TableforbasictaskList data={this.props.data} />
        <TableforbasictaskForm />
        </tbody>
      </table>
      </div>
    );
  }
});

var TableforbasictaskForm = React.createClass({
    render: function() {
      return (
        <div className="commentForm">
          Hello, world! I am a CommentForm.
        </div>
      );
    }
  });

var Addcontenttotable = React.createClass({
render: function() {
  return (
    <tr><td>{this.props.taskName}</td>
        <td>{this.props.standarDescription}</td>
        <td>{this.props.emplComment}</td>
        <td>{this.props.empRating}</td>
    </tr>
  );
}
});

var TableforbasictaskList = React.createClass({
render: function() {
  var commentNodes = this.props.data.map(function(comment) {
    return (
      <Addcontenttotable taskName={comment.taskName} standarDescription={comment.standarDescription} emplComment={comment.emplComment} empRating={comment.empRating} key={comment.id}>
      </Addcontenttotable>
    );
  });
  return (
      {commentNodes}
  );
}
});
ReactDOM.render(<div><Tableforbasictask data={data}  /></div>, document.getElementById('content'));

var数据=[
{id:1，任务名：“皮特·亨特”，标准描述：“这是一条评论”，雇员评论：“我是米阿沃”，注释：“1”}，
{id:2，任务名：“皮特·亨特”，标准描述：“这是一条评论”，雇员评论：“我是米阿沃”，注释：“1”}，
{id:3，任务名：“皮特·亨特”，标准描述：“这是一条评论”，雇员评论：“我是米阿沃”，注释：“1”}，
{id:4，任务名：“皮特·亨特”，标准描述：“这是一条评论”，雇员评论：“我是米阿沃”，注释：“1”}，
{id:5，任务名：“皮特·亨特”，标准描述：“这是一条评论”，雇员评论：“我是米阿沃”，注释：“1”}
];
var Tableforbasictask=React.createClass({
render:function（）{
返回(
任务名称
任务的标准描述
员工意见
员工评级
);
}
});
var TableforbasictaskForm=React.createClass({
render:function（）{
返回(
你好，世界！我是一个评论人。
);
}
});
var Addcontenttotable=React.createClass({
render:function（）{
返回(
{this.props.taskName}
{this.props.StandardDescription}
{this.props.emplComment}
{this.props.emplating}
);
}
});
var TableforbasictaskList=React.createClass({
render:function（）{
var commentNodes=this.props.data.map（函数（注释）{
返回(

感谢您的帮助
呈现
应返回单个根元素

返回(
{commentNodes}
);

更新。使用tbody作为包装器的更有效选项

return (<tbody>
    {commentNodes}
</tbody>);

返回(
{commentNodes}
);

必须对组件进行反应，因为您在
表中使用
TableforbasictaskList
时，需要将
commentNodes
包装在
中，也需要将
Tableforbasictask
从
表中移动
TableforbasictaskForm

var TableforbasictaskList = React.createClass({
  render: function() {
    // .....
    return (<tbody>{commentNodes}</tbody>);
  }
});

var Tableforbasictask = React.createClass({
  render: function() {
    return <div className="downloadlinks">
      <table
        className="table table-bordered table-striped-col nomargin"
        id="table-data"
      >
        <thead>
          <tr align="center">
            <td>Task  Name</td>
            <td>Standard Discription of Task</td>
            <td>Employee Comment</td>
            <td>Employee rating</td>
          </tr>
        </thead>
        <TableforbasictaskList data={this.props.data} /> 
      </table>
      <TableforbasictaskForm />
    </div>
  }
});

var TableforbasictaskList=React.createClass({
render:function（）{
// .....
返回（{commentNodes}）；
}
});
var Tableforbasictask=React.createClass({
render:function（）{
返回
任务名称
任务的标准描述
员工意见
员工评级
}
});

您是否尝试过在这个问题中格式化代码，甚至在fiddle editor中格式化代码？@对不起，我现在修复了fiddle链接，请稍后再试look@YuryTarbanko但是它没有正确地将值映射到正确的列中，您能告诉我如何做吗？不确定您的意思。表中已经有div了，这是不正确的。：）您可以使用
tr
或
td
，这取决于您需要如何安排元素。或者更好的是，您可以使用div来代替，并使用样式来制作布局。谢谢您我理解了，谢谢您我是一名PHP开发人员，所以在ReactJs中工作有点困难（PAA；），但我相信我会掌握它
var TableforbasictaskList = React.createClass({
  render: function() {
    // .....
    return (<tbody>{commentNodes}</tbody>);
  }
});

var Tableforbasictask = React.createClass({
  render: function() {
    return <div className="downloadlinks">
      <table
        className="table table-bordered table-striped-col nomargin"
        id="table-data"
      >
        <thead>
          <tr align="center">
            <td>Task  Name</td>
            <td>Standard Discription of Task</td>
            <td>Employee Comment</td>
            <td>Employee rating</td>
          </tr>
        </thead>
        <TableforbasictaskList data={this.props.data} /> 
      </table>
      <TableforbasictaskForm />
    </div>
  }
});