{This.props.children} nedir ve onu ne zaman kullanmalısınız?

React dünyasına yeni başlayan biri olarak, kullandığım zaman ne olduğunu {this.props.children}ve aynı şeyi kullanmam gereken durumları derinlemesine anlamak istiyorum . Aşağıdaki kod parçacığında bunun alaka düzeyi nedir?

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

"Çocuklar" bile nedir?

React belgeleri props.children, 'genel kutuları' temsil eden ve çocuklarını önceden tanımayan bileşenler üzerinde kullanabileceğinizi söylüyor . Benim için bu, işleri gerçekten netleştirmedi. Eminim bazıları için bu tanım çok mantıklı ama benim için olmadı.

Ne işethis.props.children yaradığına dair basit açıklamam, bir bileşeni çağırırken açılış ve kapanış etiketleri arasına eklediğiniz her şeyi görüntülemek için kullanılmasıdır.

Basit bir örnek:

Bir bileşen oluşturmak için kullanılan durum bilgisiz işlevin bir örneğini burada bulabilirsiniz. Yine, bu bir işlev olduğundan, thisanahtar kelime yoktur, bu yüzden sadece kullanınprops.children

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

Bu bileşen, <img>bazılarını alan propsve sonra görüntülenen bir içerir {props.children}.

Bu bileşen her çağrıldığında {props.children}, aynı zamanda görüntülenecektir ve bu, bileşenin açılış ve kapanış etiketleri arasında olanlara bir referanstır.

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

Bileşeni bir kendi kendine kapanma etiketiyle <Picture />çağırmak yerine, tam açılış ve kapanış etiketlerini <Picture> </Picture>çağırırsanız, arasına daha fazla kod yerleştirebilirsiniz.

Bu, <Picture>bileşeni içeriğinden ayırır ve daha yeniden kullanılabilir hale getirir.

Referans: React'in props.children'ına hızlı bir giriş

Bunu bir React bileşeninin renderyönteminde gördüğünüzü varsayıyorum , bunun gibi (düzenleme: düzenlenmiş sorunuz gerçekten bunu gösteriyor) :

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>

childrenBileşen içinde tanımlanan tüm alt öğeleri içeren React bileşenlerinin özel bir özelliğidir, örneğin yukarıdaki divsiç kısım Example. {this.props.children}bu çocukları, oluşturulan sonuçta içerir.

... aynı şeyi kullanmak için durumlar nelerdir

Alt öğeleri işlenen çıktıya doğrudan, değişmeden dahil etmek istediğinizde yaparsınız; ve yapmadıysan değil.

props.children bir bileşen çağrılırken / oluşturulurken açılış ve kapanış etiketleri arasındaki içeriği temsil eder:

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

invoke / call / render Foo:

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