ReactJS渲染表外的tbody数据

Question

我将数据渲染到表中以创建动态表。 但tbody数据正在从表格中渲染出来。

复制链接：http://codepen.io/sumitridhal/pen/wdoZKR?editors=1010

什么预期？

JS

class Table extends React.Component { 
    constructor() { 
    console.log('constructor'); 
     super(); 

     this.state = { 
     data: itemStorage.fetch() 
     } 

    console.log(this.state.data); 
    } 

    render() { 
     return (
       <tbody role="alert" aria-live="polite" aria-relevant="all"> 
        {this.state.data.map((item, i) => <TableRow key = {i} data = {item} />)} 
       </tbody> 
    ); 
    } 
} 

class TableRow extends React.Component { 
    render() { 
     return (
     <tr> 
      <td><span>{this.props.data.username}</span></td> 
      <td><span>{this.props.data.fullname}</span></td> 
      <td><span>{this.props.data.point}</span></td> 
      <td><span>{this.props.data.notes}</span></td> 
      <td><button className="btn btn-success btn-xs"><i className="fa fa-pencil-square-o"></i></button> 
     <button className="btn btn-danger btn-xs"><i className="fa fa-trash-o"></i></button> 
    </td> 
     </tr> 
    ); 
    } 
} 

let tr = $("#table"); 
React.render(<Table />, tr[0]); 

#What实际上是怎么回事？

数据正从表格中渲染出来。

即使<tr> <td>标签丢失：

Answer 1

我会建议你“设计”您的应用程序的UI完全反应，如果你已经决定使用这个库。因此，声明一个根组件，引导它并将其余的应用程序布局声明为根组件的子组件。不要使用多个React.render调用来逐个插入不同的组件。

这里或多或少是固定的pen正在使用这个建议。