Children是一个保留名称，这个特殊的子道具的值将始终是自定义组件的开始和结束标记之间的内容。 在这种情况下，这个开始和结束标签之间的内容，这是在那个组件内的子道具上可用的。

这里需要注意的重要一点是，子组件是用于将数据从父组件传递到子组件的特殊道具，但这些数据必须包含在父组件的开始和结束标记中。这主要用于一些包装器组件中，我们必须通过这些包装器组件将数据传递给下一个组件，以及我们传递静态数据的数据(在大多数情况下)，因为对于动态数据，有另一种方式将道具传递给组件。

下面是一个例子

道具。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>;

invoke /电话/ Foo负责:

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

What even is ‘children’? The React docs say that you can use props.children on components that represent ‘generic boxes’ and that don’t know their children ahead of time. For me, that didn’t really clear things up. I’m sure for some, that definition makes perfect sense but it didn’t for me. My simple explanation of what this.props.children does is that it is used to display whatever you include between the opening and closing tags when invoking a component. A simple example: Here’s an example of a stateless function that is used to create a component. Again, since this is a function, there is no this keyword so just use props.children

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

这个组件包含一个<img>，它接收一些道具，然后显示{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>组件与其内容解耦，使其更具可重用性。

参考:React的props.children的简单介绍

这是回答，但想添加一个优化示例。您可以内联分解以只获得特定的属性，而不是整个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是一个保留名称，这个特殊的子道具的值将始终是自定义组件的开始和结束标记之间的内容。 在这种情况下，这个开始和结束标签之间的内容，这是在那个组件内的子道具上可用的。