React.Children 递归遍历 使用React.children重构Tabs组件

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下面的内容,