React Children 使用
React 有一个特殊的属性children, 主要用于组件需要渲染内容，但它并不知道具体要渲染什么内容，怎么会有这种使用场景？确实比较少，但并不是没有，比如弹出框。当你写一个弹出框组件的时候，你知道它要弹出什么吗？肯定不知道，只有使用的时候才知道。那为什么要写弹出框组件？虽然内容不一样，但框是一致的，居中啊，阴影啊，宽度啊，高度啊，每一个弹出框都一样，所以有必要形成一个组件，代码复用。框写好了，那到时候用的时候，具体的内容怎么放到框里面？那就要在框中占一个位置，如果有内容候就放到这个地方，占位置使用的就是children.
根据描述，children 最简单的使用场景就是一个组件中直接写this.props.children,调用这个组件的时候，再具体写内容。这里要注意的是组件调用方式，.假设包含children的组件叫theme, 那么调用的时候，就要在theme组件两个标签之间写内容，<theme><message/></theme>, 只有这样<message />才会被theme组件中的children 获取到。为什么要这要写？想一想html 标签， 只有在两个标签之间内容才被称之为children, 这里的children 也是同样的道理，只不过标签换成了组件。
使用create-react-app 创建一个项目 react-children，实践一下，要使用boostrap 提供样式， 所以 cd react-children && npm install bootstrap --save, 使用vs code 编辑器打开项目， 在index.js中引入bootstrap css 样式
import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import * as serviceWorker from './serviceWorker';// 添加bootstrap 样式 import 'bootstrap/dist/css/bootstrap.css'; ReactDOM.render(<App />, document.getElementById('root'));
在src 目录下创建一个简单的组件ThemeSelector， 它就是只包含this.props.children
import React from 'react';
export default function ThemeSelector(props) { return ( <div className="bg-dark p-2"> <div className="bg-info p-2"> {props.children} </div> </div> ) }
然后创建两个ThemeSelector要真正渲染的组件， ActionButton和Message
import React from "react"; export default function Message(props) { return ( <div className={`h5 bg-${props.theme} text-white p-2`}> {props.message} </div> ) }
import React from "react"; export default function ActionButton(props) { return ( <button className={` btn btn-${props.theme} m-2`} onClick={props.callback}> {props.text} </button> ) }
在App.js中调用这三个组件，使ActionButton和Message 真正渲染到ThemeSelector 中
import React, { Component } from 'react';
import Message from "./Message";
import ActionButton from './ActionButton';
import ThemeSelector from './ThemeSelector';
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
counter: 0
}
}
incrementCounter = () => {
this.setState({ counter: this.state.counter + 1 });
}
render() {
return <div className="m-2 text-center">
{/* 真正要渲染的内容入到<ThemeSelector>标签 */}
<ThemeSelector>
<Message theme="primary"
message={`Counter: ${this.state.counter}`} />
<ActionButton theme="secondary"
text="Increment" callback={this.incrementCounter} />
</ThemeSelector>
</div>
}
}
npm start 启动服务器，效果如下，非常简单，
综上所述，可以简单总结一下，children 只是一个占位符，使用children 属性的组件，它也只是提供了一个架子（容器），children真正的内容，只有在调用组件的时候才能确认。这么做的好处，就是架子（容器）的代码可以复用，这也给我们一个提示， 只要有多个组件的容器一致，就可以使用childern 属性。
我以前对children 属性的认知也仅限于此，直到最近，看了一本书，才知道React 还提供了一些操作children 的方法，进而知道了children 可以是任何内容， 这些方法正是为了children 属性量身定做的。重新认识一下children， 它可以是字符串，可以是函数，,可以是数组，可以是undefined ， 可以是null， 可以是Boolean，几乎，你想到的都可以是children的内容。
<ThemeSelector>123</ThemeSelector>
<ThemeSelector>{undefined}</ThemeSelector>
<ThemeSelector>{null}</ThemeSelector>
<ThemeSelector>{(() => 'helloWorld')()}</ThemeSelector>
<ThemeSelector>{[4,5,6]}</ThemeSelector>
<ThemeSelector>{false} {true}</ThemeSelector>
只不过 null ，undefined，false, true 并不会渲染到页面上，由于提供给children 内容的各种各样，this.props.children的返回值也是不同，如果children没有获取到内容，它返回的就是undefined, 如果只有一个内容， 它返回的就是一个object, 如果有多个，它返回的就是数组。正是由于children的复杂性，React才提从提供了以下几个方法来帮我们正确地使用children 属性。
React.Children.map: 和数组的map 方法一致，接受children 和一个函数，返回map 后的children， 返回的是一个数组。函数的参数第一个是child组件，第二个是 index索引
React.Children.forEach: 和React.Children.map 的使用方法一致，只不过不返回内容
React.children.count： 接受children 作为参数，计算children的数量
React.children.only: 判断获取的children是不是只有一个，如果是，就返回这个children, 如果不是，则报错。
React.children.toArray: 把children 转化为数组，可以使用数组中的方法来操作children， 比如反转或删除
React.cloneElement: 克隆children, 为什么要克隆呢？因为获取到children 之后，它是只读的，并不能给它添加属性，如果想给children添加属性，那只能先复制一份到组件中，然后再添加属性，所以它接受两个参数，一个是children, 要复制的children， 一个是对象，相要添加的给children的属性。
简单写几个实例，熟悉一下这几个方法的用法，在ThemeSelector 组件中添加一个下拉列表示框来选择主题，来改变children ActionButton 和Message 的主题，使用是map 和cloneElement
import React, { Component } from 'react'
export default class ThemeSelector extends Component {
state = { theme: 'primary' }
setTheme = (event) => {
console.log(event.target.value)
this.setState({ theme: event.target.value });
}
render() {
// map 和cloneElement 的使用
let modChildren = React.Children.map(this.props.children, (child) => {
return React.cloneElement(child, {
theme: this.state.theme
})
})
return (
<div children='bg-dark p-2'>
{/* 下拉列表，更改主题 */}
<div className='form-group text-left'>
<label className='text-white'>theme:</label>
<select className='form-control' value={this.state.theme}
onChange={this.setTheme}>
<option value='primary'>primary</option>
<option value='secondary'>secondary</option>
<option value='success'>success</option>
</select>
</div>
{/* map 和clone 后的children */}
<div className="bg-info p-2">
{modChildren}
</div>
</div>
)
}
}
map 的使用，由于chidren的属性都是直读的，所以不能直接使用forEach 来迭代添加属性，所以使用map 来迭代，用React.cloneElemnet 来复制每一个child，同时给它添加属性。cloneElement 只接受一个child component 和一个props 对象，这个props 对象会和child component 现有的属性进行合并， 最终，就是每一个child 获取到了theme 属性。
再在themeSeclector 组件的最下面加一个反转，使用toArray()
{/* map 和clone 后的children */}
<div className="bg-info p-2">
{modChildren}
</div>
{/* toArray(), 转化为数组，然后使用数组的reserse 方法进行反转 */}
<div className="bg-info p-2">
{React.Children.toArray(this.props.children).reverse()}
</div>
加一个p元素，使用count 方法，显示有children的个数
<p>{React.Children.count(this.props.children)}</p>
还剩一个only, 只有一个children. 常用来判断children 是不是一个函数。如果我们children 需要用户提供一个函数的时候，它有可能提供多个元素，所以使用only 就会报错。如果themeSelect的组件是
{this.props.children()} , 使用{React.children.only(this.props.children)()}
