我的代码是这样的
var data = [
{id: 1,taskName: "Pete Hunt",standarDescription: "This is one comment",emplComment: "meaaow I am meeawo",empRating : "1"},{id: 2,{id: 3,{id: 4,{id: 5,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'));
所有我想要做的是将细节从Json数据列入表格.我将在未来添加一个API来获取该JSON
但我收到以下错误
Error: TableforbasictaskList.render(): A valid React element (or null) must be returned. You may have returned undefined,an array or some other invalid object.
这是JSFIDDLE
任何帮助是赞赏
解决方法
反应组件必须为
have only one root node.因为您正在表中使用TableforbasictaskList,您需要在< tbody>中包含comment comment,并且还可以在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>
}
});
