ReactJS - テーブル行を2つの行に分割して、より応答性の高いデータを表示する方法

Question

私はreactjsアプリケーションにテーブルデータを表示する必要があります。しかし、より多くのフィールドを持つテーブルは、テーブル行を2つの行に分割しようとしています。どのように行を分割することができます。

JavaServletsを呼び出すAPIを使用してMongoDBからデータを取得しています。

タグを2つ配置してみましたが、エラーが発生しています。

テーブルデータ（reactJS）を表示しているコードを見つけてください。

class SearchResults extends React.Component { 
    constructor(props) { 
     super(props); 
     this.state = { currentPage: 1 }; 
     this.handlePageChange=this.handlePageChange.bind(this); 

    } 
      handlePageChange(page, evt) { 
      this.setState({ currentPage: page }); 
      } 
    render() { 

     const per_page = "10"; 
     const paginationData = this.props.results; 
     let numPages = Math.ceil(paginationData.length/per_page); 

     if (paginationData.length % per_page > 0) { 
      numPages++; 
     } 


     return (
      <div className="panel panel-primary"> 
      <div className="panel-heading">ORDERS LIST</div> 
      <table className="table table-hover" > 
       <thead > 
       <tr> 
       <th>Order Number</th> 
       <th>Customer Name</th> 
       <th>Created By</th> 
      </tr> 
       </thead> 

       <SearchResultsList items={ this.props.results } /> 

      </table> 

       <Pagination id="content" className="users-pagination pull-right" bsSize="medium" 
        first last next prev boundaryLinks items={numPages} 
       activePage={ this.state.currentPage } onSelect={ this.handlePageChange } /> 
      </div> 
     ); 
    } 
} 

class SearchResultsList extends React.Component { 
    constructor(props) { 
     super(props); 
     this.state = { }; 
    } 
    render() { 
     return (<tbody>{ this.props.items 
      .map((item, index) => { 
        if (index >= start_offset && start_count < per_page) { 
         start_count++; 
         return <SearchResultsItem key={item.id} item={item} />; 

        } 
      }) 
     } 
     </tbody> 
     ); 

     } 

} 

class SearchResultsItem extends React.Component { 
    constructor(props) { 
     super(props); 
     this.state = { }; 
    } 
    render() { 
     return( 
       <tr> 
        <td>{ this.props.item.order_number }</td> 
        <td>{ this.props.item.customer_name }</td> 
        <td>{ this.props.item.buyer_email }</td> 
       </tr> 
     ); 
    } 
} 

最後のrender（）メソッドでは、次の行のいくつかのフィールドに2つのテーブル行タグが必要です。

以下のコードを似ています。

render() { 
    return( 
      <tr> 
       <td>{ this.props.item.order_number }</td> 
       <td>{ this.props.item.customer_name }</td> 
       <td>{ this.props.item.buyer_email }</td> 
      </tr> 
      <tr> 
       <td>{ this.props.item.buyer_id }</td> 
       <td>{ this.props.item.buyer_city }</td> 
       <td>{ this.props.item.buyer_state }</td> 
      </tr> 
    ); 
} 

しかし、もう一度テーブル行タグを配置するとエラーになります。どのようにテーブルの行を分割することができますか？

Answer 1

< v16を使用している場合は、renderメソッドを少し変更する必要があります。

render() { 
     return( <tbody> <!-- wrapper element --> 
       <tr> 
        <td>{ this.props.item.order_number }</td> 
        <td>{ this.props.item.customer_name }</td> 
        <td>{ this.props.item.buyer_email }</td> 
       </tr> 
       <tr> 
        <td>{ this.props.item.buyer_id }</td> 
        <td>{ this.props.item.buyer_city }</td> 
        <td>{ this.props.item.buyer_state }</td> 
       </tr> 
</tbody> 
     ); 
    } 

詳細はこのSO Question