表Iは、このようなテーブルを持って囲むタグ

Question

に包まれた行：

return (
      <tr key={key.dataKey}> 
       <td> 
        <SuggestBox delay={1000} method={'post'} url={url} onPriceChange={this.handlePrice.bind(this)} index={i}/> 
       </td> 
       <td> 
        <Quantity refValue={key.quantity} /> 
       </td> 
       <td> 
        <b>{key.price == 0 ? 'Waiting...' : ' $' + key.price.toFixed(2)}</b> 
       </td> 
       <td> 
        <button className="btn" onClick={this.removeItem.bind(this, i)}> X </button> 
       </td> 
      </tr> 
     ) 

しかし、私はこのレンダリング機能に別のTRを入れてみました、私のラップエラーを与える反応します。しかし、私は単純なdivでそれらをラップすることはできません。このエラーを回避するには？私が欲しいもの

はそのようなものです：あなたがテーブルにmultiple tbody tagsを持つことができるので、

return (
      <tr key={key.dataKey}> 
       <td> 
        <SuggestBox delay={1000} method={'post'} url={url} onPriceChange={this.handlePrice.bind(this)} index={i}/> 
       </td> 
       <td> 
        <Quantity refValue={key.quantity} /> 
       </td> 
       <td> 
        <b>{key.price == 0 ? 'Waiting...' : ' $' + key.price.toFixed(2)}</b> 
       </td> 
       <td> 
        <button className="btn" onClick={this.removeItem.bind(this, i)}> X </button> 
       </td> 
      </tr> 

      //Putting this gives me an error.. 
      <tr> 
       <td colspan="4">Some message</td> 
      </tr> 
     ) 

Answer 1

は<tbody>でそれらをラップします。 MDNによれば：長いテーブルで データ行が異なるセクションに分割されることを可能にする（連続している場合）<thead>、<tfoot>と<caption>要素とは異なり、 複数<tbody>要素が許可されていること

注、個別 必要に応じてフォーマットされます。

return (
    <tbody> 
     <tr key={key.dataKey}> 
      <td> 
      <SuggestBox delay={1000} method={ 'post'} url={url} onPriceChange={this.handlePrice.bind(this)} index={i}/> 
      </td> 
      <td> 
      <Quantity refValue={key.quantity} /> 
      </td> 
      <td> 
      <b>{key.price == 0 ? 'Waiting...' : ' $' + key.price.toFixed(2)}</b> 
      </td> 
      <td> 
      <button className="btn" onClick={this.removeItem.bind(this, i)}>X</button> 
      </td> 
     </tr> 

     //Putting this gives me an error.. 
     <tr> 
      <td colspan="4">Some message</td> 
     </tr> 
    </tbody> 
)