React基础篇（三）：函数作为子组件

一、什么是函数作为子组件

① 函数作为子组件也是一种组件复用的方式，它利用了children这个属性。

② children 是 React 组件的一个特殊内置属性，< Comp>xxx< /Comp> 里的 xxx 部分会作为 children 传递给 Comp 组件，如果 xxx 是函数，那么 Comp 里主动调用它去得到结果。

③ 如果xxx是函数，只要在组件内部加上一个children(value)，就会在组件内部渲染这个children的UI

二、具体实例

1、下面是< Comp>xxx< /Comp> 的一个例子，下面两个都是用的AdvancedTabSelector组件，组件内部逻辑是一致的。但是“children”函数不同，传递的props不同，所以渲染出来的UI不一样。

<AdvancedTabSelector options={
   colors} onChange={
   c => this.setState({
    color: c })} value={
   this.state.color}>
    //xxx函数1
                {
   
                    color => (
                        <span style={
   {
   
                        display:"inline-block",
                        backgroundColor:color,
                        width:'40px',
                        height:'40px'