RejectJsレンダリングメソッドのブートストラップコラプスパネル

Question

ReactJSテーブル行のコラムを崩壊させたい。試しているコードを見つけてください。

render() { 
    return (
      <tr> 
      <button className="btn btn-primary" type="button" 
      data-toggle="collapse" 
      data-target="#collapseExample" 
      aria-expanded="false" 
      aria-controls="collapseExample"> 
      + 
      </button> 
      <td>{ this.state.item.line_number }</td> 
      <td>{ this.state.item.product_code }</td> 
      </tr> 

      <tr className="collapse" id="collapseExample"> 
      <div className="well"> 
      <td>{ this.state.item.net_price }</td> 
      <td>{ this.state.item.discount }</td> 
      </div> 
      </tr> 
     ) 
     } 

「+」ボタンをクリックすると、パネル（折りたたみパネル）を開きたいとします。しかし、2番目のタグでエラーが発生しています。 render（）メソッドで2つのタグをレンダリングできません。

このソリューションをどのように実現できますか？

Answer 1

ReactJS 15.6.1バージョンとこのバージョンではreturn()メソッドを使用すると、レンダリングする複数の<tr>タグをサポートしません。 ReactJS 16+バージョンからは、return()の構成要素の配列を使用することができます。したがって、ReactJS 16+のバージョンで可能です。