In den meisten Fällen ist ein übergeordnetes Tag kein Problem.
React.createClass({
render: function() {
return (
<tbody>
<tr><td>Item 1</td></tr>
<tr><td>Item 2</td></tr>
</tbody>
);
}
});
In einigen Fällen ist es jedoch sinnvoll, Geschwisterelemente in einer Renderfunktion ohne übergeordnetes Element zu haben, und insbesondere im Fall einer Tabelle möchten Sie keine Tabellenzeile in a umbrechen div
.
React.createClass({
render: function() {
return (
<tr><td>Item 1</td></tr>
<tr><td>Item 2</td></tr>
);
}
});
Das zweite Beispiel gibt den folgenden Fehler : Adjacent XJS elements must be wrapped in an enclosing tag while parsing file
.
Wie kann ich zwei Geschwisterelemente rendern, ohne sie in ein <div>
oder ähnliches zu verpacken ?
Antworten:
Dies ist derzeit eine Einschränkung, wird aber wahrscheinlich zu einem späteren Zeitpunkt behoben ( es gibt einige offene Probleme beim Github-Repo ).
Im Moment können Sie eine Funktion verwenden, die ein Array zurückgibt (dies ist im Grunde eine zustandslose Komponente):
Und verwenden Sie das in Ihrer Komponente.
Aktualisieren
In React 16 können Sie ein Array aus dem Rendering zurückgeben.
Ein weiteres Update
Sie können jetzt entweder ein Array der obersten Ebene zurückgeben oder verwenden
<React.Fragment>
.Bei einem Array müssen wir jedem Element einen Schlüssel zuordnen, da React nicht weiß, dass die beiden Elemente konstant sind, anstatt einer dynamisch erstellten Liste:
Mit
React.Fragment
verhält es sich viel mehr so, als würde man es in ein<div>
oder ähnliches einwickeln , wobei akey
nicht erforderlich ist, wenn wir die Kinder nicht dynamisch erstellen. Zuerst können wir das Array in ein Fragment einschließen:Und dann können wir das Array und
key
s vollständig entfernen:quelle
Ich weiß, dass dies ein alter Beitrag war, aber vielleicht könnte meine Antwort eine Hilfe für Neulinge wie mich sein.
In Reaktion 16.2 wurde eine verbesserte Unterstützung für Fragmente hinzugefügt.
Sie können es jetzt folgendermaßen zurückgeben:
Sie können es mit
<></>
oder einwickeln<Fragment></Fragment>
.Wenn Sie einige Attribute übergeben möchten, wird zum Zeitpunkt des Schreibens nur der Schlüssel unterstützt, den Sie verwenden müssen,
<Fragment />
da die kurze Syntax<></>
keine Attribute akzeptiert.Hinweis: Wenn Sie die kurze Syntax verwenden möchten, stellen Sie sicher, dass Sie Babel 7 verwenden .
Quellenreferenz
quelle
Fragment
in ihrem Repository nicht finden. Kann mir bitte jemand etwas zeigen? Danke :)Woohoo! Das React-Team hat diese Funktion endlich hinzugefügt. Ab React v16.0 können Sie Folgendes tun:
Lesen Sie hier den vollständigen Blog-Beitrag, in dem "Neue Render-Rückgabetypen: Fragmente und Zeichenfolgen" erläutert werden .
quelle
Ein übergeordnetes Element ist in den meisten Fällen hilfreich, da Sie beispielsweise einen übergeordneten Klassennamen haben können, der auf den Stil untergeordneter Elemente und einige andere Szenarien abzielt ...
Aber wenn Sie das wirklich nicht wollen, können Sie verwenden
React.Fragment
Also mach einfach so etwas:
Ab Version 16.2 wird auch eine verkürzte Version verwendet
<>
, die in der Renderfunktion folgendermaßen aussieht:Wenn Sie Version 16.0 und höher verwenden, können Sie auch ein Array von Elementen zurückgeben, für die kein übergeordneter Wrapper erforderlich ist.
quelle
Sie können es wie folgt in die Klammern einwickeln:
quelle
Object.keys()
innerhalb der Rücksendung verwenden müssen?return ( [ <tr><td>Header</td></tr>{ Object.keys(this.props.data).map(function(item) { <tr><td>{data}</td></tr> }) } ] );
Mit 15.4.2 gibt esUnexpected token, expected ,
in der Eröffnungsklammer innerhalb der RückkehrDieses Beispiel funktioniert gut für mich:
quelle
So etwas hat bei mir funktioniert
quelle
Für diejenigen, die TypeScript verwenden, lautet die korrekte Syntax:
quelle