it-swarm.com.de

Was ist {this.props.children} und wann solltest du es benutzen?

Als Anfänger in der React - Welt möchte ich genau verstehen, was passiert, wenn ich {this.props.children} verwende, und welche Situationen es gibt, um dasselbe zu verwenden. Was ist die Relevanz davon im folgenden Code-Snippet?

render() {
  if (this.props.appLoaded) {
    return (
      <div>
        <Header
          appName={this.props.appName}
          currentUser={this.props.currentUser}
        />
        {this.props.children}
      </div>
    );
  }
}
69
Nimmy

Was sind eigentlich Kinder?

In den React Dokumenten wird angegeben, dass Sie props.children für Komponenten verwenden können, die ‘generische Boxen’ darstellen und deren Kinder nicht im Voraus kennen. Für mich hat das nicht wirklich geklärt. Ich bin mir sicher, dass diese Definition durchaus Sinn macht, aber für mich nicht.

Meine einfache Erklärung für die Funktionsweise von this.props.children ist, dass verwendet wird, um beim Aufrufen einer Komponente alles anzuzeigen, was Sie zwischen dem öffnenden und dem schließenden Tag einfügen.

Ein einfaches Beispiel:

Hier ist ein Beispiel für eine zustandslose Funktion, mit der eine Komponente erstellt wird. Da dies wiederum eine Funktion ist, gibt es kein this-Schlüsselwort. Verwenden Sie also einfach props.children.

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

Diese Komponente enthält einen <img>, der etwas props empfängt, und zeigt dann {props.children} an.

Immer wenn diese Komponente aufgerufen wird, wird auch {props.children} angezeigt, und dies ist nur ein Verweis darauf, was sich zwischen dem öffnenden und dem schließenden Tag 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 <Picture /> aufzurufen, können Sie beim Aufrufen des Tags <Picture> </Picture> mehr Code dazwischen einfügen.

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

Referenz: Eine kurze Einführung in Reacts Requisiten-Kinder

112

Ich gehe davon aus, dass Sie dies in der render -Methode einer React -Komponente sehen (edit: Ihre bearbeitete Frage zeigt das 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>

children ist eine spezielle Eigenschaft von React Komponenten, die alle in der Komponente definierten untergeordneten Elemente enthält, z. das divs innerhalb Example oben. {this.props.children} bezieht diese untergeordneten Elemente 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 einbeziehen möchten. und nicht, wenn du es nicht tust.

15
T.J. Crowder