首先

以下是一篇关于我学习React.children的文章，我已经轻松学会了基本的”props”、”组件”和”状态”，但在React.children方面遇到了困难，所以在确认使用方法时学习。

简言之

props.children：可以输出子元素

React.children是一個提供API的工具，用於處理this.props.children。

绊倒的地方

function FancyBorder(props) {
  return (
    <div className={'FancyBorder FancyBorder-' + props.color}>
      {props.children}
    </div>
  );
}

function WelcomeDialog() {
  return (
    <FancyBorder color="blue">
      <h1 className="Dialog-title">
        Welcome
      </h1>
      <p className="Dialog-message">
        Thank you for visiting our spacecraft!
      </p>
    </FancyBorder>
  );
}

当我看到上述的代码时，
（（我注意到FancyBorder作为props只传递了color，但是为什么还写了props.children…哎，children是从哪里来的呢…？））
我感到困惑不解。

FancyBorder组件的props.children所显示的内容在这里。
关键是，它是FancyBorder的子元素。

<h1 className="Dialog-title">
　　Welcome
</h1>
<p className="Dialog-message">
　　Thank you for visiting our spacecraft!
</p>

React的children指的是：

能夠輸出子元素的 props。
https://zh.reactjs.org/docs/composition-vs-inheritance.html#containment（官方）

// 明示的に値を渡す必要が無い
<FancyBorder color="blue">

如上所述，即使没有明确地传递值给props，React也能自动读取它。

React.children是什么？

之前以为自己对于children很理解，结果在调查过程中发现除了props.children之外还有React.children这个概念。接下来我们会探讨一下React.children是什么以及如何使用它。

React.children是React中的一个API，用于访问组件的子元素。

提供用于处理this.props.children的API工具
https://zh.reactjs.org/docs/react-api.html#reactchildren（官方）

由于我对这个公式的解释还不能理解，所以我决定再读一点关于公式的内容。
然后我找到了以下的解释。

React.Children.map
this を thisArg に設定して、children 内に含まれるすべての直下の子要素に対して関数を呼び出す。

React.Children.map(children, function[(thisArg)])

React.Children.forEach
[React.Children.map()](https://ja.reactjs.org/docs/react-api.html#reactchildrenmap) と似ているが、配列を返さない。

React.Children.forEach(children, function[(thisArg)])

React.Children.count
children に含まれるコンポーネントの総数を返す。これは map または forEach に渡したコールバックが呼ばれる回数と同じ。

React.Children.count(children)

React.children是一个方便的API，可以对获取到的子元素进行各种操作。

最后

从了解React的children属性之后，我发现React的代码变得更容易阅读了一些。
因为还有很多我不懂的事情，所以我打算逐个理解它们，并且创建出理想的UI！

?请参考以下链接

1. Composition vs Inheritance:
https://ja.reactjs.org/docs/composition-vs-inheritance.html
组合 vs 继承

2. React API – React Children:
https://ja.reactjs.org/docs/react-api.html#reactchildren
React API – React 子元素