Behandeln Sie das bedingte Rendering anmutig in React/JSX: REGELESSE ELEMENTEN MIT NULL ZURÜCKEN

) für jedes Element erzeugen, das die Bedingung erfüllt. Wenn bestimmte Elemente jedoch nicht den Rendering -Bedingungen entsprechen, verursacht die Umgang mit der "sonst" -Ast in der Kartenfunktion häufig einige Probleme.

Betrachten Sie das folgende Szenario. Eine Kartenfunktion entscheidet, ob eine DataRow -Komponente basierend auf der internen Logik rendert (sie wird als HTML

):

 const credentialRows = Anmeldeinformationen.map ((CERMINTION_RECORD) => {
    Wenn (
      CERMINTION_RECORD.STATE === 'Active' && // Beispiel Logic Anmeldeinformationen_Record.credential_proposal_dict! == null
    ) {
      const zertifical_id = Anmeldeinformationen_Record.credential_exchange_id;
      const CredentialState = CERMINTION_RECORD.STATE.REPLACEAll ('_', '') || '';
      const datecroated = neues Datum (CERMINTION_RECORD.Created_at) .tolocalestring () || '';

      Lassen Sie CredentialName = Anmeldeinformationen_Record.credential_proposal_dict? .schema_name.replaceall ('_', '') || '';

      Zurückkehren (
        <datarow key="{Anmeldeinformationen_id}" onclick="{()"> { / * ... * /}}
        >
          <datacell> {Anmeldeinformationen} </datacell>
          <datacell classname="title-case"> {conneidentialState} </datacell>
          <datacell> {datcreated} </datacell>
        </datarow>
      );
    }
    // sonst Zweig fehlt});

// im Rendering:
// <tbody> {Anmeldeinformationen} </tbody>

Dieser Code erhebt sofort eine Eslint -Warnung, z. Um dieses Problem zu lösen, können Entwickler versuchen:

1. Gibt eine leere Zeichenfolge zurück (''): React/JSX erlaubt normalerweise keine direkte Rückgabe leerer Zeichenfolgen, in denen Elemente benötigt werden, was zu Fehlern oder Warnungen führen kann.
2. Gibt ein leeres JSX -Element zurück ( oder ): Wenn ein leerer Datarow zurückgegeben wird, muss React ein Schlüsselattribut bereitstellen. Für ein "Platzhalter" -Element, das nicht gerendert werden sollte, haben wir oft keinen sinnvollen Schlüssel.

Keiner dieser Versuche kann das Problem anmutig lösen, sondern neue Komplexitäten oder Fehler einführen.

Lösung: Null zurückgeben

In React ist die Best Practice für den Umgang mit bedingten Rendern darin, Null direkt zurückzugeben, wenn Sie nicht möchten, dass etwas gerendert wird. React ignoriert null-, undefinierte und boolesche Werte (wahr, falsch), was bedeutet, dass sie nicht in die DOM gerendert werden.

Ändern des obigen Code, um NULL zurückzugeben, wenn die Bedingung nicht erfüllt ist

 const credentialRows = Anmeldeinformationen.map ((CERMINTION_RECORD) => {
    Wenn (
      CERMINTION_RECORD.STATE === 'Active' && // Beispiel Logic Anmeldeinformationen_Record.credential_proposal_dict! == null
    ) {
      const zertifical_id = Anmeldeinformationen_Record.credential_exchange_id;
      const CredentialState = CERMINTION_RECORD.STATE.REPLACEAll ('_', '') || '';
      const datecroated = neues Datum (CERMINTION_RECORD.Created_at) .tolocalestring () || '';

      Lassen Sie CredentialName = Anmeldeinformationen_Record.credential_proposal_dict? .schema_name.replaceall ('_', '') || '';

      Zurückkehren (
        <datarow key="{Anmeldeinformationen_id}" onclick="{()"> { / * ... * /}}
        >
          <datacell> {Anmeldeinformationen} </datacell>
          <datacell classname="title-case"> {conneidentialState} </datacell>
          <datacell> {datcreated} </datacell>
        </datarow>
      );
    }
    // Null zurückgeben, wenn der Zustand nicht erfüllt ist
    null zurückkehren;
});

// im Rendering:
// <tbody> {Anmeldeinformationen} </tbody>

Durch die Rückgabe von NULL enthält das Array für Anmeldeinformationen gültige JSX -Elemente und Nullwerte. Wenn React Renders

{Anmeldeinformationen} , überspringt es automatisch alle Nullwerte und rendert nur die Elemente, die tatsächlich die Datarow -Komponente zurückgeben. Dies löst nicht nur Eslint -Warnungen, sondern vermeidet auch die Mühe, unnötiges DOM -Elementrendern und wichtige Attribute zu bewirken.

Notizen und Best Practices

1. NULL gegen UNDEFINED: Obwohl undefiniert auch die Auswirkung des Renders nicht erzielt werden kann, ist Null eine häufig verwendete Konvention und eine explizitere semantische Wahl, wenn "kein Inhalt" oder "kein Rendering" bezeichnet wird.

2. Filterarray gegen Bedingung gibt NULL zurück:

   • Bedingte Rückgabe NULL: Geeignet für Szenarien, in denen die bedingte Logik relativ einfach ist und sich nicht auf die Arraylänge oder den Index auswirkt. Sein Vorteil ist, dass der Code direkt ist und die Rendering -Logik, die jedem ursprünglichen Datenelement entspricht, leicht zu verstehen ist.
   • Filtern Sie zuerst das Array, dann Karte: Wenn das Element, das Sie rendern möchten, ist eine Teilmenge des ursprünglichen Arrays und Sie möchten, dass das generierte Array nur die Elemente enthält, die Sie rendern möchten, und dann das ursprüngliche Array zuerst mit der Filtermethode filtern, und dann mit der Karte rendern, kann eine klarere Wahl sein.

    // Beispiel: Zuerst filtern und dann map
   const activecreTentialRows = Anmeldeinformationen
     filter (Anmeldeinformationen_Record => 
       CERMINTION_RECORD.STATE === 'Active' && 
       CERMINTION_RECORD.Credential_proposal_Dict! == NULL
     )
     .MAP ((CERMINTION_RECORD) => {
       const zertifical_id = Anmeldeinformationen_Record.credential_exchange_id;
       // ... andere Logikrückgabe (
         <datarow key="{Anmeldeinformation_id}" onclick="{()"> { / * ... * /}}>
           {/ * ... */}
         </datarow>
       );
     });
   
   // <tbody> {activeCredentialRows} </tbody>

   Welche Methode zu wählen, hängt von der spezifischen Geschäftslogik und den persönlichen Vorlieben ab. Wenn die Filterbedingungen komplex sind oder das Kartenergebnis -Array nur gültige JSX -Elemente enthält, ist der Filter angemessener. Wenn das bedingte Rendering ein einfacher Zweig in der Karte ist, ist es prägnanter, Null direkt zurückzugeben.

3. Lesbarkeit: Die Klarheit, wenn ... sonst null zurückkehren; Die Struktur macht den Code -Absicht klar und leicht zu warten.

Zusammenfassen

In React/JSX, insbesondere in Kartenfunktionen, besteht die eleganteste und react -Spezifikationsmethode darin, Null direkt zurückzugeben, wenn Sie kein Element rendern möchten. Dies löst nicht nur die Warnungen von Eslintint, sondern stellt auch sicher, dass reagieren diese "leeren" Elemente korrekt ignoriert werden, wodurch nicht unnötige Elemente im DOM erstellt werden, während der Code ordentlich und wartbar bleibt. Abhängig vom spezifischen Szenario können Entwickler auch in Betracht ziehen, Filter vor Karten zur Vorverarbeitungsdaten zu verwenden, um ähnliche Ergebnisse zu erzielen.