Che cos'è {this.props.children} e quando dovresti usarlo?


118

Essendo un principiante al mondo React, voglio capire in profondità cosa succede quando lo uso {this.props.children}e quali sono le situazioni da utilizzare lo stesso. Qual è la rilevanza di esso nello snippet di codice sottostante?

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


1
Non era chiaro nel collegamento fornito cosa succede quando uso {this.props.children} all'interno di un componente.
Nimmy

Risposte:


176

Che cosa sono anche i "bambini"?

I documenti di React dicono che puoi usarli props.childrensu componenti che rappresentano "scatole generiche" e che non conoscono i loro figli in anticipo. Per me, questo non ha chiarito le cose. Sono sicuro che per alcuni quella definizione ha perfettamente senso, ma per me non è stato così.

La mia semplice spiegazione di ciò che this.props.childrenfa è che viene utilizzato per visualizzare tutto ciò che si include tra i tag di apertura e chiusura quando si richiama un componente.

Un semplice esempio:

Ecco un esempio di una funzione senza stato utilizzata per creare un componente. Ancora una volta, poiché questa è una funzione, non esiste una thisparola chiave, quindi usalaprops.children

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

Questo componente contiene un messaggio <img>che ne riceve alcuni propse quindi viene visualizzato {props.children}.

Ogni volta che viene richiamato questo componente {props.children}verrà visualizzato anche e questo è solo un riferimento a ciò che si trova tra i tag di apertura e chiusura del componente.

//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>
  )
}

Invece di invocare il componente con un tag a chiusura automatica, <Picture />se lo si richiama si apriranno e chiuderanno completamente i tag, <Picture> </Picture>è quindi possibile inserire più codice tra di esso.

Questo separa il <Picture>componente dal suo contenuto e lo rende più riutilizzabile.

Riferimento: una rapida introduzione ai props.children di React


Se la riusabilità non è preoccupata per i nodi figlio, c'è qualche differenza di prestazioni quando si chiama {props.children} dal componente figlio rispetto all'utilizzo all'interno del componente figlio?
Nimmy

1
@Nimmy quando si utilizza {props.children} non abbiamo problemi di prestazioni, abbiamo solo bisogno di componenti passati come oggetti di scena. e quando possiamo utilizzare i bambini all'interno del componente figlio non è necessario utilizzare {props.children}
Soroush Chehresa

1
L'esempio è tratto da codeburst.io/…
Alpit Anand

1
@AlpitAnand Puoi vedere il riferimento alla fine della risposta: |
Soroush Chehresa

1
Molte grazie. Molto ben spiegato.
Alok Ranjan

24

Presumo che tu stia vedendo questo nel rendermetodo di un componente React , come questo (modifica: la tua domanda modificata lo mostra effettivamente) :

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è una proprietà speciale dei componenti React che contiene qualsiasi elemento figlio definito all'interno del componente, ad esempio l' divsinterno Examplesopra. {this.props.children}include quei figli nel risultato di rendering.

... quali sono le situazioni per usare lo stesso

Lo faresti quando vuoi includere gli elementi figli nell'output renderizzato direttamente, senza modifiche; e non se non l'hai fatto.


Se la riusabilità non è preoccupata per i nodi figlio, c'è qualche differenza di prestazioni quando si chiama {props.children} dal componente figlio rispetto all'utilizzo all'interno del componente figlio?
Nimmy

@ Nimmy: Mi dispiace, non so cosa intendi con * "... che usarlo all'interno del componente figlio".
TJ Crowder

Intendevo "chiamare {this.props.children} nel componente figlio piuttosto che scrivere i nodi direttamente nel rispettivo componente figlio".
Nimmy

2
@ Nimmy Suppongo che tu stia pensando perché dovrei mettere {this.props.children} invece posso scriverlo, lo so. Se questo è il caso, fallo e ottieni un leggero vantaggio in termini di prestazioni. Ma il tuo componente sarà statico, non può essere riutilizzato con un set di figli diversi in un posto diverso nella tua base di codice.
Subin Sebastian

2
@ssk: Ah! Ben fatto. Nimmy - Sì, potresti scrivere i bambini direttamente nel tuo render, ma sarebbero gli stessi bambini in ogni caso. Accettando elementi figlio (dove appropriato), ogni istanza del tuo componente può avere contenuti diversi. Ho aggiornato l'esempio nella risposta.
TJ Crowder

0

props.children rappresenta il contenuto tra i tag di apertura e chiusura quando si richiama / si esegue il rendering di un componente:

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>;

invoca / chiama / render Foo:

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

oggetti di scena e oggetti di scena. bambini

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.