javascript - Vad är {this.props.children} och när bör du använda det?

Som nybörjare i React-världen vill jag förstå på djupet vad som händer när jag använder {this.props.children} och i vilka situationer man använder det. Vad är dess relevans i nedanstående kodsnutt?

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

Svar #1

Vad är egentligen ‘barn’?

React-dokumentationen säger att du kan använda props.children på komponenter som representerar ’generiska lådor’ och som inte känner till sina barn i förväg. För mig gjorde det inte riktigt saker klarare. Jag är säker på att för vissa, gör den definitionen perfekt mening, men det gjorde den inte för mig.

Min enkla förklaring av vad this.props.children gör är att det används för att visa vad som än inkluderas mellan öppnings- och sluttaggarna när man anropar en komponent.

Ett enkelt exempel:

Här är ett exempel på en stateless-funktion som används för att skapa en komponent. Eftersom detta återigen är en funktion finns det ingen this-nyckelord, så använd bara props.children

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

Denna komponent innehåller en <img> som tar emot vissa props och sedan visar {props.children}.

När denna komponent anropas kommer {props.children} också att visas och detta är bara en referens till vad som finns mellan komponentens öppnings- och stängningstaggar.

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

Istället för att anropa komponenten med en självstängande tagg <Picture />, om du anropar den med fullständiga öppnings- och stängningstaggar <Picture> </Picture>, kan du sedan placera mer kod mellan dem.

Detta kopplar bort <Picture>-komponenten från dess innehåll och gör den mer återanvändbar.

Referens: En snabb introduktion till Reacts props.children

Svar #2

props.children representerar innehållet mellan öppningstaggen och stängningstaggen när man anropar/renderar en komponent:

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

anropa/kalla/rendera Foo:

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

Svar #3

Jag antar att du ser detta i en React-komponents render-metod, på detta sätt (redigera: din redigerade fråga visar faktiskt det):

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 är en speciell egenskap hos React-komponenter som innehåller eventuella barn-element som definieras inom komponenten, t.ex. divs inuti Example ovan. {this.props.children} inkluderar dessa barn i det renderade resultatet.

...vilka är situationerna att använda samma

Du skulle göra det när du vill inkludera barnelementen i den renderade utdata direkt, oförändrade; och inte om du inte gjorde det.

Svar #4

Detta är besvarat, men ville lägga till ett optimeringsexempel. Du kan dekomponera inline för att endast få specifika egenskaper istället för hela props-objektet (vilket betyder att du inte behöver fortsätta skriva props).

const MyView = ({title, children}) => {
  return (
    <>
      <h1>{title}</h1>
      {children}
    </>
  );
}

Då skulle du använda det så här:

import { MyView } from './MyView';

const MyParentView = () => {
  return (
    <MyView title="Hello">
      <h2>World</h2>
    </MyView>
  );
}

Slutresultatet skulle vara HTML som renderas till något liknande detta:

<div>
  <h1>Hello</h1>
  <h2>World</h2>
</div>

Relaterade artiklar