Kann ich einem React-Fragment eine Schlüssel-Prop hinzufügen?

Lesezeit: 2 Minuten

Benutzer-Avatar
sdgfsdh

Ich erzeuge eine dl in Reaktion:

<dl>
  {
    highlights.map(highlight => {
      const count = text.split(highlight).length - 1;

      return (
        <>
          <dt key={`dt-${highlight.id}`}>{highlight}</dt>
          <dd key={`dd-${highlight.id}`}>{count}</dd>
        </>
      );
    })
  }
</dl>

Das gibt mir die Warnung:

Warnung: Jedes untergeordnete Element in einer Liste sollte eine eindeutige „Schlüssel“-Requisite haben.

Dadurch wird die Warnung entfernt, aber der gewünschte HTML-Code wird nicht generiert:

<dl>
  {
    highlights.map(highlight => {
      const count = text.split(highlight).length - 1;

      return (
        <div key={highlight.id}>
          <dt>{highlight}</dt>
          <dd>{count}</dd>
        </div>
      );
    })
  }
</dl>

Und ich kann keine hinzufügen key Prop an ein Fragment (<> </>).

Wie kann man das umgehen?


Ich verwende React 16.12.0.

  • <React.Fragment key={'foo'}>. Verwenden Sie nicht die Shortcut-Syntax. Sehen Schlüsselfragmente

    – Dupokas

    18. Dezember 2019 um 11:23 Uhr


  • Nur ein Vorschlag, verwenden Sie den Index nicht als Schlüssel. Sehen Sie hier, warum: Reagieren Sie mit Index als Schlüssel für Elemente in der Liste

    – Ashish Duklan

    19. November 2020 um 11:22 Uhr


Benutzer-Avatar
demkowitsch

Um einem Fragment einen Schlüssel hinzuzufügen, müssen Sie die vollständige Fragmentsyntax verwenden:

<React.Fragment key={your key}>
...
</React.Fragment>

Siehe Dokumente hier https://reactjs.org/docs/fragments.html#keyed-fragments

Benutzer-Avatar
Mukesh Bhati

Ja, Sie können einen Schlüssel im unten stehenden Formularfragment hinzufügen, was in der kürzeren Version von Fragments nicht möglich ist (z. B. <>).

<Fragment key={your key}></Fragment>

Als Referenz

Benutzer-Avatar
Maqsood Ahmed

Sie können auf diese Weise auch Schlüssel automatisch Ihrer Komponentenliste zuweisen

React.Children.toArray(someData.map(data=><div>{data.name}</div>))

1010150cookie-checkKann ich einem React-Fragment eine Schlüssel-Prop hinzufügen?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy