javascript - 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

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

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