什么是 {this.props.children} 以及何时应该使用它？

Question

作为 React 世界的初学者，我想深入了解当我使用 {this.props.children} 时会发生什么，以及在什么情况下使用它。在下面的代码 sn-p 中它的相关性是什么？

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

Answer 1

什么是“孩子”？

React 文档说您可以在表示“通用框”并且提前不知道其子级的组件上使用 props.children。对我来说，这并没有真正解决问题。我敢肯定，对于某些人来说，这个定义非常有道理，但对我来说却不是。

我对@9​​87654324@ 所做的简单解释是它用于在调用组件时显示您在开始和结束标记之间包含的任何内容。

一个简单的例子：

这是一个用于创建组件的无状态函数示例。同样，由于这是一个函数，因此没有 this 关键字，所以只需使用 props.children

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

此组件包含一个<img>，它正在接收一些props，然后它显示{props.children}。

每当调用此组件时，{props.children} 也会被显示，这只是对组件的开始标签和结束标签之间的内容的引用。

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

如果你调用它而不是使用自动关闭标签<Picture />调用组件，那么你可以在它之间放置更多代码。

这将<Picture> 组件与其内容分离，使其更易于重用。

参考：A quick intro to React’s props.children

Answer 2

我假设您在 React 组件的 render 方法中看到了这一点，就像这样 （编辑：您编辑的问题确实表明了这一点）：

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 是 React 组件的一个特殊属性，它包含组件内定义的任何子元素，例如上面的Example 里面的divs。 {this.props.children} 在渲染结果中包含这些孩子。

...什么情况下使用相同

当你想在渲染输出中直接包含子元素时，你会这样做，不变；如果你不这样做，就不会。

Answer 3

props.children 表示调用/渲染组件时开始和结束标记之间的内容：

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

调用/调用/渲染Foo:

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

Answer 4

已回答，但想添加一个优化示例。您可以分解内联以仅获取特定属性而不是整个 props 对象（这意味着您不必一直写props）。

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

然后你会像这样使用它：

import { MyView } from './MyView';

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

最终的结果将是 HTML，呈现如下：

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