React: Mehrere Tabellenzeilen in array.map beim Rendern

Question

Ich habe dieses Problem. Ich möchte ein Array loopen und die Werte als eine Tabelle anzeigen, in der jedes Element eine Zeile in der Tabelle ist. Bis jetzt keine Probleme. Aber abhängig von einem Wert in jedem Element möchte ich eine zusätzliche Zeile mit mehr Werten für jedes Array-Element anzeigen. Ich habe diesen Code:

<tbody> 
    {myList.map((item, i) => { 
    return (
     <div> 
     <tr key={i} onClick={toggleMobileOpen.bind(this, i)}> 
      <td className="toggler"> 
      {item.mobile_open && <ArrowUp />} 
      {!item.mobile_open && <ArrowDown />} 
      </td> 
      <td>{item.elem_one}</td> 
      <td>{item.elem_two}</td> 
      <td>{item.elem_three}</td> 
     </tr> 
     {item.mobile_open && 
      <tr className="test-td"> 
      <td>...</td> 
      </tr> 
     } 
     </div> 
    ); 
    })} 
</tbody> 

Mein Problem ist, dass ich bekommen:

Warnung: validateDOMNesting (...): Text-Knoten können nicht als Kind von < tr> erscheinen.

und

Warnung: validateDOMNesting (...): < div> kann nicht als Kind von < tbody erscheinen>

Wenn ich versuche, den oben beschriebenen Ansatz. Entfernen der div gibt mir Syntax error die ich schon kannte, aber trotzdem versucht.

Hat jemand eine Idee, wie man das löst?

Answer 1

Sie tun

{item.mobile_open && 
      <tr className="test-td"> 
      <td>...</td> 
      </tr> 
     } 

die falsche wie <tr>false</tr> druckt, wenn mobile_open falsch ist.

versuchen

{item.mobile_open ? 
       (<tr className="test-td"> 
       <td>...</td> 
       </tr>) : null 
      } 

Was die div Warnung prüfen, mit React 16 Fragmente

mit React 16,0 Fragment Syntax

<tbody> 
    {myList.map((item, i) => { 
    return [ 
     <tr key={i} onClick={toggleMobileOpen.bind(this, i)}> 
      <td className="toggler"> 
      {item.mobile_open && <ArrowUp />} 
      {!item.mobile_open && <ArrowDown />} 
      </td> 
      <td>{item.elem_one}</td> 
      <td>{item.elem_two}</td> 
      <td>{item.elem_three}</td> 
     </tr>, 
     {item.mobile_open && 
      <tr className="test-td"> 
      <td>...</td> 
      </tr> 
     } 

    ]; 
    })} 
</tbody> 

Aber ich ziehe die jüngste 16,2 Fragment Syntax

Reagieren

import React, { Fragment } from "react"; 

<tbody> 
     {myList.map((item, i) => { 
     return (
      <Fragment> 
      <tr key={i} onClick={toggleMobileOpen.bind(this, i)}> 
       <td className="toggler"> 
       {item.mobile_open && <ArrowUp />} 
       {!item.mobile_open && <ArrowDown />} 
       </td> 
       <td>{item.elem_one}</td> 
       <td>{item.elem_two}</td> 
       <td>{item.elem_three}</td> 
      </tr> 
      {item.mobile_open && 
       <tr className="test-td"> 
       <td>...</td> 
       </tr> 
      } 
      </Fragment> 
     ); 
     })} 
    </tbody> 

Mehr auf Fragmente here

Answer 2

Dies sagt alles: <div> cannot appear as a child of <tbody>

In myList.map(f), f genau ein <tr> jedes Mal zurückgeben sollte es aufgerufen wird. So könnten Sie myList vorverarbeiten, um JSON-Elemente zu enthalten, die dann wie gewünscht gerendert werden können.

Es ist jedoch wahrscheinlich besser, für jedes Datenelement eine Zeile auszugeben und die zusätzlichen Informationen auf andere Weise anzuzeigen. Vielleicht fügen Sie eine div innerhalb der <td>, wenn Sie auf Ihr Pfeilsymbol klicken?

Answer 3

In React16 können Sie nun eine Reihe von Komponenten zurückgeben, mit denen Sie die <div /> entfernen können.

Der Code würde in etwa so aussehen:

<tbody> 
     {myList.map((item, i) => { 
     return [ 
      <tr key={i} onClick={toggleMobileOpen.bind(this, i)}> 
       <td className="toggler"> 
       {item.mobile_open && <ArrowUp />} 
       {!item.mobile_open && <ArrowDown />} 
       </td> 
       <td>{item.elem_one}</td> 
       <td>{item.elem_two}</td> 
       <td>{item.elem_three}</td> 
      </tr>, 

      //This inline conditional makes it weird but this works 
      ...[item.mobile_open && 
       <tr className="test-td"> 
       <td>...</td> 
       </tr> 
      ] 
     ]; 
     })} 
    </tbody>