理解React中的children
React 的核心是组件。你可以像嵌套 HTML 标签一样嵌套组件，所以写 JSX 并不难。当我刚开始学 React 的时候，我觉得关于 children 我只要会用 props.children 就可以了。我承认，我天真了。
因为在 JSX 里可以写 Javascript，我们可以改变 children。比如，我们可以传特殊的 props 给它们，或者决定是否要渲染它们，或者根据自己的意愿任意操作它们。废话不多说，进入正题。
Child 组件
假设我们有 Grid 组件和 Row 组件，你可以像下面这样使用它们：
<Grid>
<Row />
<Row />
<Row />
</Grid>
上面的三个 Row 组件会通过 props.children 的方式传给 Grid 组件，在 Grid 组件内可以渲染 children:
class Grid extends React.Component {
render() {
return <div>{this.props.children}</div>
}
}
父组件也可以选择不渲染传入的任何 children。比如像下面这样：
class Fullstop extends React.Component {
render() {
return <h1>Hello world!</h1>
}
}
无论你给 Fullstop 传什么 children，它都只会显示Hello world!。
Child 可以是任意类型
React 的 children 并不一定是组件类型的，它可以是任意类型。比如，我们可以给上面的 Grid 传入一些文本：
<Grid>Hello world!</Grid>
JSX 会自动删除开始和结尾的空格和空行。同时也会将内容中间的空行压缩成一个空格。这意味着下面的这些示例最后渲染出的内容是一样的：
<Grid>Hello world!</Grid>
<Grid>
Hello world!
</Grid>
<Grid>
Hello
world!
</Grid>
<Grid>
Hello world!
</Grid>
你也可以混合不同类型的 child，如下所示：
<Grid>
Here is a row:
<Row />
Here is another row:
<Row />
</Grid>
Child 也可以是函数
我们可以传递 Javascript 表达式作为 children，包括函数。比如下面这个组件：
class Executioner extends React.Component {
render() {
// 看，我们在调用children ↓
return this.props.children()
}
}
可以这样使用这个组件：
<Executioner>{() => <h1>Hello World!</h1>}</Executioner>
上面的例子只是为了展示函数作为 children 的这种想法，所以看上去没什么用。
假设有一个从服务器获取数据的场景，这种函数作为 children 的模式能派上用场：
<Fetch url="api.myself.com">{(result) => <p>{result}</p>}</Fetch>
操作 children
如果你有看过 React 的官方文档，你会看到这样的说法，“children 是一种不透明的数据结构”。其实他们想说的是，props.chidlren 可以是任意的类型，比如可以是数组，可以是函数，也可以是对象，等等。
React 提供了一些辅助类函数帮助我们更容易地操作 children。这些函数都挂载在 React.Children 对象下面。
循环 children
有两个最常用的辅助函数，React.Children.map 和 React.Children.forEach。他们的用法和同名的数组方法类似，但能够作用于函数、对象或者传入的任意 children。
class IgnoreFirstChild extends React.Component {
render() {
const children = this.props.children
return (
<div>
{React.Children.map(children, (child, i) => {
// 忽略第一个 child
if (i < 1) return
return child
})}
</div>
)
}
}
IgnoreFirstChild 会渲染第一个 child 以外的 child。
<IgnoreFirstChild>
<h1>First</h1>
<h1>Second</h1> // 只会渲染这个
</IgnoreFirstChild>
上面的例子中，我们也可以用 this.props.children.map 的方式去循环。但是，假如我们传入的 children 是一个函数，直接使用数组的 map 方法会导致报错。使用 React.Children.map，一切依旧正常：
<IgnoreFirstChild>
{() => <h1>First</h1>} // <- Ignored 💪
</IgnoreFirstChild>
计算 children 个数
因为 children 可以是任意类型，所以统计 children 的个数并不容易。举个例子，如果你传入的是“hello world!"字符串，使用 this.props.children.length 计数的话就是 12，但其实只有一个 child。
所以我们需要使用 React.Children.count：
class ChildrenCounter extends React.Component {
render() {
return <p>React.Children.count(this.props.children)</p>
}
}
它会返回正确的 children 数量，不管 children 是什么类型：
// Renders "1"
<ChildrenCounter>
Second!
</ChildrenCounter>
// Renders "2"
<ChildrenCounter>
<p>First</p>
<ChildComponent />
</ChildrenCounter>
// Renders "3"
<ChildrenCounter>
{() => <h1>First!</h1>}
Second!
<p>Third!</p>
</ChildrenCounter>
将 children 转为数组
如果上面的方法都不能满足你的需求，还有最后一招：你可以通过 React.Children.toArray 方法将 children 转成数组:
class Sort extends React.Component {
render() {
const children = React.Children.toArray(this.props.children)
return <p>{children.sort().join(' ')}</p>
}
}
强制只能有一个 child
如果你想强制只能传入一个 child，你可以使用 React.Children.only 方法，如下：
class Executioner extends React.Component {
render() {
return React.Children.only(this.props.children)()
}
}
上面的例子中，如果使用 Excutioner 组件的时候传入多个 child 会直接导致报错。这能避免一些不严谨的开发者滥用我们的组件。
编辑 children
虽然我们可以传入任意类型作为 children 进行渲染，但到目前为止，我们只能在父组件中控制它们，而不是在具体渲染它们的组件中。举个例子，假设有一个 RadioGroup 组件包含了一些 RadioButton 组件（渲染成 radio 类型的 input）:
render() {
return(
<RadioGroup>
<RadioButton value="first">First</RadioButton>
<RadioButton value="second">Second</RadioButton>
<RadioButton value="third">Third</RadioButton>
</RadioGroup>
)
}
这些 RadioButton 其实并不是在书写他们的地方渲染的，它们只是作为 children 传给了 RadioGroup 组件。上面的代码中有一个小问题，因为没有 name 属性，三个 RadioButton 并不是一组的。为了解决这个问题，我们可以给每一个 RadioButton 加上 name 属性：
<RadioGroup>
<RadioButton name="g1" value="first">
First
</RadioButton>
<RadioButton name="g1" value="second">
Second
</RadioButton>
<RadioButton name="g1" value="third">
Third
</RadioButton>
</RadioGroup>
但是等等，这样做既繁琐又容易出错。我们既然在写 Javascript, 我们难道不能更智能地将 name 属性添加给每一个 RadioButton 吗？
改变 children 的 props
在 RadioGroup 组件中，我们加了一个 renderChildren 方法用于修改 children 的 props：
class RadioGroup extends React.Component {
constructor() {
super()
this.renderChildren = this.renderChildren.bind(this)
}
renderChildren() {
// TODO
return this.props.children
}
render() {
return <div className="group">{this.renderChildren()}</div>
}
}
首先，我们循环 children，并返回每一个 child：
renderChildren() {
return React.Children.map(this.props.children, child => {
// TODO
return child
})
}
然后呢？
克隆元素
这是要介绍的最后一个辅助函数，React.cloneElement。使用这个方法的时候，我们传入需要被克隆的元素作为第一个参数，然后传入一个对象作为第二个参数，这个对象中的属性会作为 props 传给克隆出来的元素：
const cloned = React.cloneElement(element, {
new: 'yes!',
})
cloned 元素会有一个值为 yes! 的 new 属性。
这个方法正是我们需要的，现在我们给每一个 child 添加上一个 name 属性：
renderChildren() {
return React.Children.map(this.props.children, child => {
return React.cloneElement(child, {
name: this.props.name
})
})
}
最后，我们只需要给 RadioGroup 设置 name 属性即可：
<RadioGroup name="g1">
<RadioButton value="first">First</RadioButton>
<RadioButton value="second">Second</RadioButton>
<RadioButton value="third">Third</RadioButton>
</RadioGroup>