Einzelne Zeile funktioniert gut
render: function () {
return (
{[1,2,3].map(function (n) {
return <p>{n}</p>
}}
);
}
nicht für mehrere Zeilen
render: function () {
return (
{[1,2,3].map(function (n) {
return (
<h3>Item {n}</h3>
<p>Description {n}</p>
)
}}
);
}
Vielen Dank.
return ("asdf" "asdf");
du willstreturn ["asdf", "asdf"];
Antworten:
Versuchen Sie, sich die Tags als Funktionsaufrufe vorzustellen (siehe Dokumente ). Dann wird der erste:
Und der zweite:
Es sollte jetzt klar sein, dass das zweite Snippet nicht wirklich Sinn macht (Sie können in JS nicht mehr als einen Wert zurückgeben). Sie müssen es entweder in ein anderes Element einschließen (höchstwahrscheinlich das, was Sie möchten, auf diese Weise können Sie auch eine gültige
key
Eigenschaft bereitstellen ), oder Sie können Folgendes verwenden:Mit JSX-Zucker:
Sie müssen das resultierende Array nicht reduzieren, React erledigt das für Sie. Siehe die folgende Geige http://jsfiddle.net/mEB2V/1/ . Nochmals: Das Einwickeln der beiden Elemente in einen Div / Abschnitt ist auf lange Sicht höchstwahrscheinlich besser.
quelle
Uncaught Error: Invariant Violation: Product.render(): A valid ReactComponent must be returned. You may have returned undefined, an array or some other invalid object.
<div>{ this.props.foos.map(function() { return <Foo /> }) }</div>
. Dierender
Funktion der Komponente kann dieses Array jedoch nicht zurückgeben, ohne es zu verpacken, z. B. in ein div.Es scheint, dass die alte Antwort über die Rückgabe eines Arrays nicht mehr gilt (möglicherweise seit React ~ 0.9, wie @ dogmatic69 in einem Kommentar schrieb ).
In den Dokumenten wird angegeben, dass Sie einen einzelnen Knoten zurückgeben müssen:
In vielen Fällen können Sie Dinge einfach in a
<div>
oder a einwickeln<span>
.In meinem Fall wollte ich mehrere
<tr>
s zurückgeben. Ich habe sie in einen<tbody>
Tisch gewickelt - ein Tisch darf mehrere Körper haben.BEARBEITEN: Ab React 16.0 ist das Zurückgeben eines Arrays anscheinend wieder zulässig, sofern jedes Element Folgendes enthält
key
: https://facebook.github.io/react/blog/2017/09/26/react-v16.0.html # new-render-return-types-fragmente und -stringsBEARBEITEN: Mit React 16.2 können Sie eine Liste von Elementen mit
<Fragment>…</Fragment>
oder sogar umgeben<>…</>
, wenn Sie dies einem Array vorziehen: https://blog.jmes.tech/react-fragment-and-semantic-html/quelle
<li>
? Vorausgesetzt, ich kann nicht einfach alles<ul>
<li><ul><li>one</li><li>two</li></ul></li>
wenn das in deiner Situation funktioniert. Oder: Ein Wrapping-Div wäre nicht unbedingt gültig, aber vielleicht wird es in allen relevanten Browsern gut dargestellt? Wenn Sie es versuchen, lassen Sie es uns wissen.li
in einspan
oder einwickelndiv
funktionierte nicht gut für mich. Der Div hat das Rendering ernsthaft unterbrochen, und zumindest in meinem Anwendungsfall hat die Spanne das CSS durcheinander gebracht. 2 ¢: Der Versuch, mehrere Teilmengen vonli
s zurückzugeben, ist ein Codegeruch. Wir haben einul
als eine Art Pulldown-Menü verwendet, und ich wollte zunächst, dass viele Komponenten "Abschnitte" vonli
s zurückgeben. Am Ende war es besser, den gesamten Menücode in eine einzelne Komponente zu "verankern",ul
alsli
s aus mehreren Quellen einzuschleusen . Ich denke, es hat auch das mentale Modell für die Benutzeroberfläche ein wenig sauberer gemacht.Ab React v16.0.0 können mehrere Elemente zurückgegeben werden, indem sie in eine eingeschlossen werden
Array
Ebenfalls ab React v16.2.0 wird eine neue Funktion namens aufgerufen,
React Fragments
mit der Sie mehrere Elemente umschließen könnenGemäß Dokumentation:
quelle
Möglicherweise möchten Sie auch mehrere Listenelemente in einer Hilfsfunktion innerhalb einer React-Komponente zurückgeben. Geben Sie einfach ein Array von HTML-Knoten mit dem
key
Attribut zurück:quelle
Sie können
createFragment
hier verwenden.https://facebook.github.io/react/docs/create-fragment.html
(hier mit ES6- und JSX-Syntax)
Sie müssen zuerst das
react-addons-create-fragment
Paket hinzufügen :Vorteil gegenüber Jan Olaf Krems 'Lösung: Reagieren beschwert sich nicht über das Fehlen
key
quelle
Aktualisiert
Verwenden Sie React Fragment. Es ist einfach. Link zur Fragmentdokumentation.
Alte Antwort - veraltet
Mit React> 16 können Sie React -Composite verwenden .
Natürlich muss React-Composite installiert werden.
quelle
Es ist einfach durch React Fragment
<></>
undReact.Fragment
:quelle