typescriptレンダリング出力のHTML形式を使用したリアクタ

Question

次のレンダリングで問題が発生するのはなぜですか？私は単に同じデータの2行を出力しようとしています。それはうまくコンパイルされますが、私の出力では、tbodyデータの2つの行が最初の列（make）に整列し、残りのヘッダーはtbodyデータの2つの行の右側に整列されます。私はテストするためにこのコードを単純化していますが、最終的には各列の入力フィールドを持つ2番目の行が必要です。入力フィールドで、対応するセルの値を変更できます。

私も取得：

warning.js:35 Warning: validateDOMNesting(...): <div> cannot appear as a child of <tbody>. See CarTool > tbody > div. 

warning.js:35 Warning: validateDOMNesting(...): <tr> cannot appear as a child of <div>. See CarTool > div > tr. 

public render() { 
     return <div> 
      <h1>Car Tool</h1> 
      <table> 
       <thead> 
        <tr> 
         <td>Make</td> 
         <td>Model</td> 
         <td>Year</td> 
         <td>Color</td> 
         <td>Price</td> 
        </tr> 
       </thead> 
       <tbody> 
        {this.props.cars.map((car) => 
         <div> 
          <tr> 
           <td>{car.make}</td> 
           <td>{car.model}</td> 
           <td>{car.year}</td> 
           <td>{car.color}</td> 
           <td>{car.price}</td> 
          </tr> 
          <tr> 
           <td>{car.make}</td> 
           <td>{car.model}</td> 
           <td>{car.year}</td> 
           <td>{car.color}</td> 
           <td>{car.price}</td> 
          </tr> 
         </div>, 
        )} 
       </tbody> 
      </table> 
     </div>; 
    } 

年モデルの色価格 フォードエッジを作る2016白42000 フォードエッジ2016白42000 フォードレンジャー2006白10000 フォードレンジャー2006白10000 シボレーマリブ2012青32000 Chevy Malibu 2012 blue 32000

Answer 1

この

{this.props.cars.map((car, index) => 
        [ 
         <tr key={"value" + index}> 
          <td>{car.make}</td> 
          <td>{car.model}</td> 
          <td>{car.year}</td> 
          <td>{car.color}</td> 
          <td>{car.price}</td> 
         </tr>, 
         <tr key={"input" + index}> 
          <td>{car.make}</td> 
          <td>{car.model}</td> 
          <td>{car.year}</td> 
          <td>{car.color}</td> 
          <td>{car.price}</td> 
         </tr> 
        ], 
       )} 

Answer 2

tbodyの子としてdiv要素を使用する構文が無効です。

<tbody> 
    {this.props.cars.map((car) => 
     <tr> 
      <td>{car.make}</td> 
      <td>{car.model}</td> 
      <td>{car.year}</td> 
      <td>{car.color}</td> 
      <td>{car.price}</td> 
     </tr> 
    )} 
</tbody> 

また、あなたが動的にmap経由でそれらを作成していることから、各要素のkeyを含めることを忘れないでください。