Wie vermeide ich ein zusätzliches Umbrechen von <div> in React?

113

Heute habe ich angefangen, ReactJS zu lernen und bin nach einer Stunde mit dem Problem konfrontiert. Ich möchte eine Komponente einfügen, die zwei Zeilen in einem Div auf der Seite enthält. Ein vereinfachtes Beispiel dafür, was ich unten mache.

Ich habe ein HTML:

<html>
..
  <div id="component-placeholder"></div>
..
</html>

Renderfunktion wie folgt:

...
render: function() {

    return(
        <div className="DeadSimpleComponent">
            <div className="DeadSimpleComponent__time">10:23:12</div >
            <div className="DeadSimpleComponent__date">MONDAY, 2 MARCH 2015</div>
        </div>
    )
}
....

Und unten rufe ich render auf:

ReactDOM.render(<DeadSimpleComponent/>, document.getElementById('component-placeholder'));

Generiertes HTML sieht folgendermaßen aus:

<html>
..
  <div id="component-placeholder">
    <div class="DeadSimpleComponent">
            <div class="DeadSimpleComponent__time">10:23:12</div>
            <div class="DeadSimpleComponent__date">MONDAY, 2 MARCH 2015</div>
    </div>
</div>
..
</html>

Das Problem, dass ich nicht sehr glücklich bin, dass React mich zwingt, alles in eine div "DeadSimpleComponent" zu packen. Was ist die beste und einfachste Problemumgehung ohne explizite DOM-Manipulationen?

UPDATE 28.07.2017: Die Verantwortlichen von React haben diese Möglichkeit in React 16 Beta 1 hinzugefügt

Seit React 16.2 können Sie Folgendes tun:

render() {
  return (
    <>
      <ChildA />
      <ChildB />
      <ChildC />
    </>
  );
}

javascript reactjs Kirill Reznikov
quelle

4

perfekte Benennungspraxis ;-)

Kirill Reznikov

Könnte ich Ihre HTML-Datei sehen? Ich habe Ihre Frage falsch gelesen. Möglicherweise habe ich eine Problemumgehung.

Louis93

Smth wie folgt: jsfiddle.net/qawumm3v

Kirill Reznikov

Sie haben ein Problem mit einer Komponente mit einem einzelnen Element? "Ja wirklich?"

Dominic

Was meinst du? Ich versuche nur zu reagieren, es sollte nicht sehr kompliziert sein. Aber Einschränkung sieht nervig aus.

Kirill Reznikov

142

Diese Anforderung wurde in React Version (16.0)] 1 entfernt , sodass Sie diesen Wrapper jetzt vermeiden können.

Mit React.Fragment können Sie eine Liste von Elementen rendern, ohne einen übergeordneten Knoten zu erstellen. Offizielles Beispiel:

render() {
  return (
    <React.Fragment>
      <ChildA />
      <ChildB />
      <ChildC />
    </React.Fragment>
  );
}

Mehr hier: Fragmente

Luger
quelle

1

Tolle Neuigkeiten DmitryUlyanets. Gibt es einen geplanten Veröffentlichungstermin?

Jonas Carlbaum

Es ist seit dem 26. September 2017 veröffentlicht, siehe reactjs.org/blog/2017/09/26/react-v16.0.html

Tom

56

Update 2017-12-05: React v16.2.0 unterstützt jetzt das Rendern von Fragmenten vollständig mit verbesserter Unterstützung für die Rückgabe mehrerer untergeordneter Elemente aus einer Komponenten-Rendermethode, ohne Schlüssel in untergeordneten Elementen anzugeben:

render() {
  return (
    <>
      <ChildA />
      <ChildB />
      <ChildC />
    </>
  );
}

Wenn Sie eine React-Version vor Version 16.2.0 verwenden, können Sie <React.Fragment>...</React.Fragment>stattdessen auch Folgendes verwenden :

render() {
  return (
    <React.Fragment>
      <ChildA />
      <ChildB />
      <ChildC />
    </React.Fragment>
  );
}

Original:

In React v16.0 wurde die Rückgabe eines Arrays von Elementen in der Rendermethode eingeführt, ohne es in ein div zu verpacken: https://reactjs.org/blog/2017/09/26/react-v16.0.html

render() {
  // No need to wrap list items in an extra element!
  return [
    // Don't forget the keys :)
    <li key="A">First item</li>,
    <li key="B">Second item</li>,
    <li key="C">Third item</li>,
  ];
}

Derzeit ist für jedes Element ein Schlüssel erforderlich, um die Schlüsselwarnung zu vermeiden. Dies kann jedoch in zukünftigen Versionen geändert werden:

In Zukunft werden wir JSX wahrscheinlich eine spezielle Fragmentsyntax hinzufügen, für die keine Schlüssel erforderlich sind.

Tom
quelle

Die neue Kurzschrift-Syntax von <> </> ist großartig. Ich habe jedoch immer noch ein gemischtes Gefühl.

Thulani Chivandikwa

@ThulaniChivandikwa Würde es Ihnen etwas ausmachen, Ihre Bedenken hinsichtlich der Kurzschrift-Syntax zu äußern?

Tom

1

Ich denke, es geht mehr um das Konzept eines leeren Tags, das in JSX seltsam und nicht sehr intuitiv ist, es sei denn, Sie wissen genau, was es tut.

Thulani Chivandikwa

7

Sie können verwenden:

render(){
    return (
        <React.Fragment>
           <div>Some data</div>
           <div>Som other data</div>
        </React.Fragment>
    )
}

Weitere Einzelheiten finden Sie in dieser Dokumentation .

Rolando Cintron
quelle

3

Verwenden Sie [] anstelle von (), um die gesamte Rückgabe zu verpacken.

render: function() {
  return[
    <div className="DeadSimpleComponent__time">10:23:12</div >
    <div className="DeadSimpleComponent__date">MONDAY, 2 MARCH 2015</div>
  ]
}

Michael Cuneo
quelle

2

Ich habe eine Komponente erstellt, um untergeordnete Komponenten ohne DIV zu verpacken. Es wird als Schattenverpackung bezeichnet: https://www.npmjs.com/package/react-shadow-wrapper

Matt Landers
quelle

Ich habe ein Problem auf Ihrem Paket gepostet. Können Sie bitte einen Blick darauf werfen? Danke

Antoni4

1

Dies ist weiterhin erforderlich . ABER Reagieren Sie jetzt, um Elemente zu erstellen, ohne ein zusätzliches DOM-Element zu erstellen.

Die zusätzliche Umhüllung ist erforderlich (normalerweise mit einem übergeordneten divElement), da für die Reacts- createElementMethode ein typeParameter erforderlich ist either a tag name string (such as 'div' or 'span'), a React component type (a class or a function). Aber das war, bevor sie React einführten Fragment.

In diesem NEUEN API-Dokument finden Sie Informationen zu createElement

React.createElement : Erstellen Sie ein neues React-Element des angegebenen Typs und geben Sie es zurück. Das Typargument kann entweder eine Tag-Namenszeichenfolge (z. B. 'div' oder 'span'), ein React-Komponententyp (eine Klasse oder eine Funktion) oder ein React-Fragmenttyp sein .

Hier ist das offizielle Beispiel, Refer React.Fragment .

render() {
  return (
    <React.Fragment>
      Some text.
      <h2>A heading</h2>
    </React.Fragment>
  );
}

Prime
quelle

0

Sie werden dieses divElement nicht loswerden können . React.render () muss einen gültigen DOM-Knoten zurückgeben.

Henrik Andersson
quelle

Die Divs werden ignoriert, Knockout.JS macht das Gleiche. Ein Div ohne Styling am äußeren Teil Ihrer Komponente hat keine Auswirkungen.

Chris Hawkes

16

@ ChrisHawkes, nicht einverstanden. Ein Wrapper-Div wirkt sich auf die CSS-Selektoren aus.

Downhillski

Wenn Sie mit semantischen Elementen arbeiten, die nicht vollständig React-Komponenten sein sollen, wird dies zu einem Problem. Nehmen wir an, es gibt ein Abschnitts-Tag mit Kopf- und Fußzeilenelementen und dazwischen einen Google Map-Container, den wir in React nicht verwenden möchten. Dann wäre es schön, einen Header als React-Komponente und eine Fußzeile als React-Komponente zu haben, ohne zusätzliche Div: s außen an den React-Komponenten einfügen zu müssen ... Das ist einfach dummes Design, wenn Sie sich überhaupt für HTML interessieren Sie geben aus ...

Jonas Carlbaum

0

Hier ist eine Möglichkeit, "transzulente" Komponenten zu rendern:

import React from 'react'

const Show = (props) => {
  if (props.if || false) {
    return (<React.Fragment>{props.children}</React.Fragment>)
  }
  return '';
};

----


<Show if={yomama.so.biq}>
    <img src="https://yomama.so.biq">
    <h3>Yoamama</h3>
<Show>

Ярослав Рахматуллин
quelle

0

Es gibt auch eine Problemumgehung. Der folgende Blockcode generiert ein Fragment, ohne dass React.Fragment erforderlich ist.

return [1,2,3].map(i=>{
if(i===1) return <div key={i}>First item</div>
if(i===2) return <div key={i}>Second item</div>
return <div key={i}>Third item</div>
})

erfan seidipoor
quelle

0

Ich weiß, dass diese Frage beantwortet wurde. Sie können natürlich React.Fragment verwenden, das keinen Knoten erstellt, aber Sie können Dinge wie ein Div gruppieren.

Wenn Sie Spaß haben möchten, können Sie außerdem einen Reaktionsmodus implementieren (und viele Dinge lernen), der die zusätzlichen Divs entfernt. Dazu möchte ich ein großartiges Video darüber veröffentlichen, wie Sie dies auf der Basis des Reaktionscodes selbst tun können.

https://www.youtube.com/watch?v=aS41Y_eyNrU

Dies ist natürlich nichts, was Sie in der Praxis tun würden, aber es ist eine gute Lernmöglichkeit.

Gabriel P.
quelle

Wie vermeide ich ein zusätzliches Umbrechen von <div> in React?

Antworten: