react中的this.props.children

//父组件
import RecordListTab from "../components/recordListTab/index"
<RecordListTab
   tabNameList={['全部任务', '返现记录']}
   tabIndex={tabIndex}
   chooseTab={this.chooseTab}
>
   {
      tabIndex == 0 ? (
         <Task
            expireTime={expireTime}
            showExtraTask={cutOrderAbMap['kdd_task_show'] !== 'false'}
            showQrcode={cutOrderAbMap['kdd_facetoface'] == 'new'}
            showLottery={cutOrderAbMap['kdd_lottery'] == 'new'}
            remainDrawsTimes={remainDrawsTimes}
            remainSharedDrawsTimes={remainSharedDrawsTimes}
            cutOrderId={cutOrderId}
            isHelping={isHelping}
            cutStatus={cutStatus}
            refreshTask={refreshTask}
            taskEvent={(e) => this.taskEvent(e)}
            extraEvent={(e) => this.extraEvent(e)}
            qrCodeEvent={(e) => this.qrCodeEvent(e)}
            onShowPrizeDraw={() => this.showPrizeDraw()}
            shareBackType={shareBackType}
            shareBackStatus={shareBackStatus}
            showNew={true}
            clickTab={clickTab}
         />
      ) : (
         tabIndex == 1 ? (
            <CashList cutRecordList={this.data.cutRecordList} />
         ) : ("")

      )
   }
</RecordListTab>

//子组件
render() {
   let {
      chooseTab,
      tabIndex,
           tabNameList,
   } = this.props || {}
   return (
      <View className={style.recordListTable}>
         <View className={[style.titleCont]}>
                   {tabNameList && tabNameList.length == 2 && tabNameList.map((item, index) => {
                       return (
                           <View className={[tabIndex == index ? style.active : style.activePre, index == 0 ? style.tabFirst : style.tabSecond]} onClick={(e) => chooseTab(e, index)}>{item}</View>
                       )
                   })
                   }
                   {tabNameList && tabNameList.length == 1 &&
                       <View className={[style.activeOld]} >{tabNameList[0]}</View>
                   }
               </View>
               {this.props.children}
      </View>
   )
}

react是单向数据流，props是我们从上个组件传值传下来的集合，每一个props都应该对应的是从上个组件传过来的值。但是这里有一个例外，那就是this.props.childre。

this.props.children 的值有三种可能：
如果当前组件没有子节点，它就是 undefined ;
如果有一个子节点，数据类型是 Object；
如果有多个子节点，数据类型就是 Array。

React 提供一个工具方法 React.Children 来处理 this.props.children 。可以用 React.Children.map 来遍历子节点，而不用担心 this.props.children 的数据类型是 undefined 还是 Object Array

 <Test>hk-child</Test>
 <Test/>
 <Test>
   <ul>
     <li>111</li>
     <li>222</li>
   </ul>
 </Test>
 <Doit>
   <span>hk-1</span>
   <span>hk-2</span>
   <span>hk-3</span>
 </Doit>
 
class Test extends React.Component {
  render() {
    return (
      <div className="red">
        <h5>Hello hk</h5>
        { this.props.children }
      </div>
    )
  }
}

class Doit extends React.Component{
  render(){
     return (
          <ul>
           {
                React.Children.map(this.props.children, function (value,key) {
                       return <li>{value}----{key}</li>;
                })
            }
          </ul>
     );
  }
};