2017-12-17 38 views
0

を反応します。私は各サブジエートの子どもたちを繰り返して、それをレンダリングしたい。私はこのようなものを試しました:構文は、私は私のJSXファイルにこのテーブルを持っている

this.state.subjects.map((subj) => { 
    return (subj.levelId === lvl.id && 
     <tr key={subj.id}> 
      <td>{subj.name}</td> 
      <td>{subj.code}</td> 
     </tr> 

     subj.Children.map((child) => { 
      return (true && 
       <tr key={child.id}> 
        <td>{child.name}</td> 
        <td>{child.code}</td> 
       </tr> 
      ) 
     }) 
    ) 
}) 

しかし、追加の行は各親の被験者に追加されません。もう少し試してみましたが、すべてが間違っているようです。これの正しい構文は何ですか?

+0

'subj.levelId === lvl.id'は本当に' true'を返しますか? –

+0

@ArmanCharan:はい、対象がレンダリングされるためです。 –

答えて

0

2番目のスニペットが使用しているものであれば無効です。

リアクションは、returnごとに1つのトップレベル要素しか必要としません。露出した要素を共通のdivまたはtrの中に入れ子にする必要があります。

また、returningsubj.Children.map()関数ではありません。あなたはそれを実行しているだけです。

具体的な例は下記を参照してください。

this.state.subjects.map((subj) => { 

    // Match. 
    const match = (subj.levelId === lvl.id) 

    // Match? 
    if (match) { 

    // Match. 
    return (
     <div> 

     <tr key={subj.id}> 
      <td>{subj.name}</td> 
      <td>{subj.code}</td> 
     </tr> 

     {subj.Children.map((child) => (
      <tr key={child.id}> 
      <td>{child.name}</td> 
      <td>{child.code}</td> 
      </tr> 
     ))} 

     </div> 
    ) 

    } 

    // !Match. 
    return '' 

}) 
+0

こんにちは、私はdivを追加することはできません、私は1つを追加しようとし、それは、私が使うことのできる代替手段はありますか? –

+0

'tr'または' span'を使ってみてください –

+1

'tbody'を試すこともできます – brub

関連する問題