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]);

＃实际发生了什么？

数据被渲染出桌面。

甚至缺少<tr> <td>个标签：

Answer 1

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

以下是使用此建议的或多或少固定的pen。