Wie rendere ich Geschwisterelemente, ohne sie in ein übergeordnetes Tag einzuschließen?

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 ?

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):

function things(arg, onWhatever){
    return [
        <tr><td>Item 1</td></tr>,
        <tr><td>Item 2</td></tr>
    ];
}

Und verwenden Sie das in Ihrer Komponente.

return (
    <table><tbody>
      {things(arg1, this.handleWhatever)}
      {things(arg2, this.handleWhatever)}
    </tbody></table>
);

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:

function RowPair() {
  return [
    <tr key="first"><td>First</td></tr>,
    <tr key="second"><td>Second</td></tr>,
  ]
}

Mit React.Fragmentverhält es sich viel mehr so, als würde man es in ein <div>oder ähnliches einwickeln , wobei a keynicht erforderlich ist, wenn wir die Kinder nicht dynamisch erstellen. Zuerst können wir das Array in ein Fragment einschließen:

function RowPair() {
  return <React.Fragment>{[
    <tr key="first"><td>First</td></tr>,
    <tr key="second"><td>Second</td></tr>,
  ]}</React.Fragment>
}

Und dann können wir das Array und keys vollständig entfernen:

function RowPair() {
  return <React.Fragment>
    <tr><td>First</td></tr>
    <tr><td>Second</td></tr>
  </React.Fragment>
}

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:

return (
  <>
    <tr><td>Item 1</td></tr>
    <tr><td>Item 2</td></tr>
  </>
);

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

Woohoo! Das React-Team hat diese Funktion endlich hinzugefügt. Ab React v16.0 können Sie Folgendes tun:

render() {
  // No need to wrap list items in an extra element!
  return [
    // Don't forget the keys :)
      <tr key="a"><td>Item 1</td></tr>,
      <tr key="b"><td>Item 2</td></tr>
  ];
}

Lesen Sie hier den vollständigen Blog-Beitrag, in dem "Neue Render-Rückgabetypen: Fragmente und Zeichenfolgen" erläutert werden .

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:

<React.Fragment>
  <First />
  <Second />
  <Third />
</React.Fragment>

Ab Version 16.2 wird auch eine verkürzte Version verwendet <>, die in der Renderfunktion folgendermaßen aussieht:

render() {
  return (
    <>
      <First />
      <Second />
      <Third />
    </>
  );
}

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.

render() {
 return [
  <h1 key="heading">Hello from Alireza!</h1>,
  <p key="first">Here where I'm!</p>,
  <p key="second">And again here :)</p>
 ];
}

Sie können es wie folgt in die Klammern einwickeln:

React.createClass({
    render: function() {
        return (
          [
            <tr><td>Item 1</td></tr>
            <tr><td>Item 2</td></tr>
          ]
        );
    }
});

Dieses Beispiel funktioniert gut für mich:

let values = [];

if (props.Values){
  values = [
    <tr key={1}>
      <td>props.Values[0].SomeValue</td>
    </tr>
  ,
    <tr key={2}>
        <td>props.Values[1].SomeValue</td>
        </tr>
    ];
}

return (
    <table className="no-border-table table">
      <tbody>
        <tr>
            <th>Some text</th>
        </tr>
        {values}
      </tbody>
    </table>
)

So etwas hat bei mir funktioniert

this.props.map((data,index)=>{return( [ <tr>....</tr>,<tr>....</tr>];)});

Für diejenigen, die TypeScript verwenden, lautet die korrekte Syntax:

return [
  (
    <div>Foo</div>
  ),
  (
    <div>Bar</div>
  )
];