ダイナミックテーブルの行に反応する

Question

私は、オブジェクトの配列にマッピングする反応テーブルを持っています。また、これらのオブジェクトのプロパティの1つをマップして、より多くの行を作成したいと考えています。私がマップしたいオブジェクトプロパティは、オブジェクトの配列でもあります。だから、私のデータは、このような何かを見て：

[ 
    {id:1,name:"fakeName",children:[{id:10,name:"fakeChildName"}]}, 
    {id:2,name:"fakeName2",children:[{id:11,name:"fakeChildName11"}]} 
] 

その後、私のrender()では、私は、テーブル内にこれを持っている：これはうまくレンダリング

<tbody> 
    {myArray.map(row => (
    <tr key={`row-${row.name}`}> 
     <td> 
     <div className="parent">{row.id}</div> 
     </td> 
     <td>{row.name}</td> 
     <td /> 
     <td /> 
     <td /> 
    </tr> 
))} 
</tbody> 

。 row.childrenオブジェクトを繰り返し処理して、同じテーブル本体の列3,4,5をいっぱいにする行を追加したいとします。だから私はこれをしなかった：

<tbody> 
    {myArray.map(row => (
    <tr key={`row-${row.name}`}> 
     <td> 
     <div className="parent">{row.id}</div> 
     </td> 
     <td>{row.name}</td> 
     <td /> 
     <td /> 
     <td /> 
    </tr> 
    {row.children.map(childRow => (
     <tr key={`row-child-${childRow.name}`}> 
     <td /> 
     <td /> 
     <td>{childRow.id}</td> 
     <td>{childRow.name}</td> 
     <td><button>myButton</button></td> 
     </tr> 
    ))} 
))} 
</tbody> 

私はその部分を追加すると、私はそれがそこにカンマを期待していますと言って、私の{row.children.map...を持っている行に予期しないトークンエラーが発生します。私はこれを正しく行う方法がわかりません。

Answer 1

無効なJSXである{row.children.map...より前の行にある<tr>を閉じています。あなたは代わりにJSXの配列を返すことができます。

{myArray.map(row => ([ 
    <tr key={`row-${row.name}`}> 
    <td> 
     <div className="parent">{row.id}</div> 
    </td> 
    <td>{row.name}</td> 
    <td /> 
    <td /> 
    <td /> 
    </tr>, 
    {...row.children.map(childRow => (
    <tr key={`row-child-${childRow.name}`}> 
     <td /> 
     <td /> 
     <td>{childRow.id}</td> 
     <td>{childRow.name}</td> 
     <td><button>myButton</button></td> 
    </tr> 
))} 
]))} 

あなたは、これは物事が厄介になり、私はここに簡潔上の明瞭さを好む伝えることができます：

{myArray.map(row => { 
    const parentRow = (
    <tr key={`row-${row.name}`}> 
     <td> 
     <div className="parent">{row.id}</div> 
     </td> 
     <td>{row.name}</td> 
     <td /> 
     <td /> 
     <td /> 
    </tr> 
); 
    const childrenRows = row.children.map(childRow => (
    <tr key={`row-child-${childRow.name}`}> 
     <td /> 
     <td /> 
     <td>{childRow.id}</td> 
     <td>{childRow.name}</td> 
     <td><button>myButton</button></td> 
    </tr> 
)); 

    return [parentRow, ...childrenRows]; 
})} 

Answer 2

あなたはsingle React elementを返す必要があります。

は（divは、単一の要素を反応させるのである）、これを試してみてください：

<tbody> 
    {myArray.map(row => { 
    return (
     <div> 
     <tr key={`row-${row.name}`}> 
      <td> 
      <div className="parent">{row.id}</div> 
      </td> 
      <td>{row.name}</td> 
      <td /> 
      <td /> 
      <td /> 
     </tr> 
     {row.children.map(childRow => (
      <tr key={`row-child-${childRow.name}`}> 
      <td /> 
      <td /> 
      <td>{childRow.id}</td> 
      <td>{childRow.name}</td> 
      <td><button>myButton</button></td> 
      </tr> 
     ))} 
     </div> 
    ) 
    })} 
    </tbody>