Was ist {this.props.children} und wann sollten Sie es verwenden?

118

Als Anfänger der React-Welt möchte ich {this.props.children}genau verstehen, was passiert, wenn ich es benutze und in welchen Situationen ich es benutze . Welche Relevanz hat es im folgenden Code-Snippet?

render() {
  if (this.props.appLoaded) {
    return (
      <div>
        <Header
          appName={this.props.appName}
          currentUser={this.props.currentUser}
        />
        {this.props.children}
      </div>
    );
  }
}
Nimmy
quelle
3
Mögliches Duplikat von ReactJS: Warum this.props.children verwenden?
Maazadeeb
1
In dem angegebenen Link war nicht klar, was passiert, wenn ich {this.props.children} in einer Komponente verwende.
Nimmy
Beste Ressource mxstbr.blog/2017/02/react-children-deepdive
Akshay Vijay Jain

Antworten:

174

Was ist überhaupt "Kinder"?

In den React-Dokumenten heißt es, dass Sie props.childrenKomponenten verwenden können, die "generische Boxen" darstellen und deren untergeordnete Elemente nicht im Voraus kennen. Für mich hat das die Dinge nicht wirklich geklärt. Ich bin mir sicher, dass diese Definition für einige durchaus Sinn macht, aber für mich nicht.

Meine einfache Erklärung this.props.childrenist, dass damit beim Aufrufen einer Komponente alles angezeigt wird, was Sie zwischen den öffnenden und schließenden Tags einfügen.

Ein einfaches Beispiel:

Hier ist ein Beispiel für eine zustandslose Funktion, mit der eine Komponente erstellt wird. Da dies eine Funktion ist, gibt es kein thisSchlüsselwort. Verwenden Sie einfachprops.children

const Picture = (props) => {
  return (
    <div>
      <img src={props.src}/>
      {props.children}
    </div>
  )
}

Diese Komponente enthält eine <img> , die einige empfängt propsund dann angezeigt wird {props.children}.

Immer wenn diese Komponente aufgerufen {props.children}wird , wird sie auch angezeigt. Dies ist nur ein Hinweis darauf, was sich zwischen den öffnenden und schließenden Tags der Komponente befindet.

//App.js
render () {
  return (
    <div className='container'>
      <Picture key={picture.id} src={picture.src}>
          //what is placed here is passed as props.children  
      </Picture>
    </div>
  )
}

Anstatt die Komponente mit einem selbstschließenden Tag aufzurufen <Picture /> aufzurufen, wenn Sie sie aufrufen, werden Tags vollständig geöffnet und geschlossen. <Picture> </Picture>Sie können dann mehr Code dazwischen platzieren.

Dies entkoppelt die <Picture> Komponente von ihrem Inhalt und macht sie wiederverwendbarer.

Referenz: Eine kurze Einführung in Reacts Requisiten

Soroush Chehresa
quelle
Wenn die Wiederverwendbarkeit der untergeordneten Knoten nicht betroffen ist, gibt es einen Leistungsunterschied beim Aufrufen der {props.children} von der untergeordneten Komponente als bei der Verwendung innerhalb der untergeordneten Komponente?
Nimmy
1
@Nimmy bei Verwendung von {props.children} haben wir kein Leistungsproblem, sondern benötigen nur übergebene Komponenten als Requisiten. und wenn wir Kinder innerhalb der Kinderkomponente verwenden können, müssen wir nicht {props.children} verwenden
Soroush Chehresa
1
Beispiel ist von codeburst.io/…
Alpit Anand
1
@AlpitAnand Sie können die Referenz am Ende der Antwort sehen: |
Soroush Chehresa
24

Ich gehe davon aus, dass Sie dies in der renderMethode einer React-Komponente wie folgt sehen (bearbeiten: Ihre bearbeitete Frage zeigt dies tatsächlich) :

class Example extends React.Component {
  render() {
    return <div>
      <div>Children ({this.props.children.length}):</div>
      {this.props.children}
    </div>;
  }
}

class Widget extends React.Component {
  render() {
    return <div>
      <div>First <code>Example</code>:</div>
      <Example>
        <div>1</div>
        <div>2</div>
        <div>3</div>
      </Example>
      <div>Second <code>Example</code> with different children:</div>
      <Example>
        <div>A</div>
        <div>B</div>
      </Example>
    </div>;
  }
}

ReactDOM.render(
  <Widget/>,
  document.getElementById("root")
);
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

childrenist eine spezielle Eigenschaft von React-Komponenten, die alle untergeordneten Elemente enthält, die innerhalb der Komponente definiert sind, z . B. das divsInnere Exampleoben. {this.props.children}schließt diese Kinder in das gerenderte Ergebnis ein.

... was sind die Situationen, um das gleiche zu verwenden

Sie tun dies, wenn Sie die untergeordneten Elemente unverändert direkt in die gerenderte Ausgabe aufnehmen möchten. und nicht, wenn du es nicht getan hast.

TJ Crowder
quelle
Wenn die Wiederverwendbarkeit der untergeordneten Knoten nicht betroffen ist, gibt es einen Leistungsunterschied beim Aufrufen der {props.children} von der untergeordneten Komponente als bei der Verwendung innerhalb der untergeordneten Komponente?
Nimmy
@Nimmy: Es tut mir leid, ich weiß nicht, was du mit * "... meinst, als es in der untergeordneten Komponente zu verwenden".
TJ Crowder
Ich meinte "{this.props.children} in der untergeordneten Komponente aufrufen, als die Knoten direkt in die jeweilige untergeordnete Komponente zu schreiben".
Nimmy
2
@Nimmy Ich gehe davon aus, dass Sie überlegen, warum ich {this.props.children} setzen soll, stattdessen kann ich es aufschreiben, ich weiß es. Wenn dies der Fall ist, tun Sie dies bitte und haben Sie einen leichten Leistungsvorteil. Ihre Komponente ist jedoch statisch und kann nicht mit mehreren untergeordneten Elementen an einer anderen Stelle in Ihrer Codebasis wiederverwendet werden.
Subin Sebastian
2
@ssk: Ah! Schön. Nimmy - Ja, Sie könnten die Kinder direkt in Ihre schreiben render, aber es wären in jedem Fall die gleichen Kinder. Durch Akzeptieren untergeordneter Elemente (falls zutreffend) kann jede Instanz Ihrer Komponente unterschiedliche Inhalte haben. Ich habe das Beispiel in der Antwort aktualisiert.
TJ Crowder
0

props.children stellt den Inhalt zwischen dem öffnenden und dem schließenden Tag beim Aufrufen / Rendern einer Komponente dar:

const Foo = props => (
  <div>
    <p>I'm {Foo.name}</p>
    <p>abc is: {props.abc}</p>

    <p>I have {props.children.length} children.</p>
    <p>They are: {props.children}.</p>
    <p>{Array.isArray(props.children) ? 'My kids are an array.' : ''}</p>
  </div>
);

const Baz = () => <span>{Baz.name} and</span>;
const Bar = () => <span> {Bar.name}</span>;

aufrufen / aufrufen / rendern Foo:

<Foo abc={123}>
  <Baz />
  <Bar />
</Foo>

Requisiten und Requisiten

zeljko_a
quelle