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正在使用這個建議。