React.Children.map()有些类似Array.prototype.map()。如果children是数组则此方法返回一个数组，如果是null或undefined则返回null或undefined。
<Tabs activeIndex={0} onTabChange={this.changeView}> <Tab> <strong>列表模式</strong> </Tab> <Tab> <strong>图表模式</strong> </Tab> </Tabs> <ul> {React.Children.map(children, (child,index) => { console.log('children',children); console.log('child',child) return ( <li > <a> {child} </a> </li> ) } } </ul>第一参数是children，即Tabs组件里的Tab。 第二个参数是fucntion，function的参数第一个是遍历的每一项即child ，第二个是对应的索引。
export const Tab = ({children}) => <React.Fragment>{children}</React.Fragment> 对应home.js部分的 <React.Fragment> <Tabs> <Tab> </Tab> </Tabs> <React.Fragment>开发环境中console出来的children与child如下图,children是一个对象数组,child是Symbol 其他组件import {Tabs,Tab} from Tab.js
然后有一点不明白的是,为什么 export const Tab = ({children}) => <React.Fragment>{children}</React.Fragment>,这里是children而不是child,于是我尝试改为child 发现账本图标的功能并不受影响,但是不显示li标签与其子元素了.
那么Tabs遍历的children,children 对应的Tab ,child对应的Tab下面的内容,
