• • 孩子是什么**

React文档说，你可以在表示"通用盒子"的组件上使用props.children，而这些组件事先并不知道它们的孩子。对我来说，这并没有真正澄清问题。我相信对一些人来说，这个定义非常有意义，但对我来说却没有。
我对this.props.children的简单解释是 * 它用于显示调用组件时在开始标记和结束标记之间包含的任何内容。*

• • 一个简单的例子：**

下面是一个用于创建组件的无状态函数的示例。同样，由于这是一个函数，因此没有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>，则可以在它们之间放置更多代码，而不是使用自关闭标记<Picture />调用组件。
这将<Picture>组件与其内容分离，使其更易于重用。
参考：A quick intro to React’s props.children

我假设您在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}在渲染结果中包含这些子元素。
...在什么情况下使用相同的
当您希望在呈现的输出中直接包含子元素时，可以这样做，而不做任何更改;如果你不知道就不会。

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>

这个问题得到了解答，但是需要添加一个优化示例。您可以通过内联分解只获取特定的属性，而不是整个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>

Children是一个保留名称，这个特殊的子 prop 的值将始终是自定义组件的开始和结束标记之间的内容。因此，在本例中，开始和结束标记之间的内容，即该组件内的子 prop 上可用的内容。

对于一个孩子，有一个父，这是打开/关闭标签，因为它可以看到在React的官方例子，这是FancyBorder。
h1和p是FancyBorder的子级，您可以在the CodePen link上进行实际检查。

这里需要注意的是，子组件是一个特殊的属性，用于将数据从父组件传递到子组件，但此数据必须包含在父组件的开始和结束标记中。这主要用于一些 Package 器组件中，通过这些组件，我们必须将数据传递到下一个组件，也必须传递其静态数据（在大多数情况下），因为对于动态数据，有另一种方式将 prop 传递给组件。
Here is the example

在React中，props. children属性引用传递给React组件的子元素。
例如，在下面的代码中：

<MyComponent>
  <div>Child 1</div>
  <div>Child 2</div>
</MyComponent>

MyComponent组件有两个子组件：包含文本"Child1"的div元素和包含文本"Child2"的div元素。MyComponent组件可以使用props.children属性访问和呈现这些子元素。
例如，MyComponent组件可以如下所示呈现其子组件：

class MyComponent extends React.Component {
  render() {
    return (
      <div>
        {this.props.children}
      </div>
    );
  }
}

这将把两个div元素呈现为MyComponent组件的子元素。