React插槽 之React.Children

React.Children 提供了用于处理 this.props.children 不透明数据结构的实用方法。

React.Children.map

React.Children.map(children, function[(thisArg)])

在 children 里的每个直接子节点上调用一个函数，并将 this 设置为 thisArg。如果 children 是一个数组，它将被遍历并为数组中的每个子节点调用该函数。如果子节点为 null 或是 undefined，则此方法将返回 null 或是 undefined，而不会返回数组。

如果 children 是一个 Fragment 对象，它将被视为单一子节点的情况处理，而不会被遍历。

React.Children.forEach

React.Children.forEach(children, function[(thisArg)])

与 React.Children.map() 类似，但它不会返回一个数组。

React.Children.count

React.Children.count(children)

返回 children 中的组件总数量，等同于通过 map 或 forEach 调用回调函数的次数。

React.Children.only

React.Children.only(children)

验证 children 是否只有一个子节点（一个 React 元素），如果有则返回它，否则此方法会抛出错误。

注意：

React.Children.only() 不接受 React.Children.map() 的返回值，因为它是一个数组而并不是 React 元素。

React.Children.map 的用例

import React, {
     Component} from 'react';
import {
     connect} from 'react-redux';
import {
     Steps} from 'antd';
import {
     setStepWillChange, setConfirmStep} from 'actions/common';
import './index.less';
import Final from 'src/project';
import Temp from '../temp/index';
import Storage from 'fw/util/storage';
import util from 'fw/util/util';
class StepView extends Component {
     

    componentWillMount() {
     
        setConfirmStep(this.props.dispatch, this.props.stepSource.length - 3);
    }

    render() {
     
        let visitFrom = Storage.getSession('visitFrom') || util.getUrlParam('visitFrom');
        console.log('%c  张浩雨: StepView -> render -> React.Children.map ', 'font-size:16px;background-color:#44ce68;color:white;', React.Children.map)
        console.log('%c  张浩雨: StepView -> render -> this.props.children ', 'font-size:16px;background-color:#51e51d;color:black;', this.props.children)
        return (
            <div className="steps-wrap" style={
     {
     width: '1200px', margin: '30px auto', backgroundColor: '#FFFFFF'}}>
                <Steps current={
     this.props.stepIndex} maxDescriptionWidth={
     this.props.maxDescriptionWidth || 100}>
                    {
     
                        this.props.stepSource.map((v, i) => {
     
                            return <Steps.Step key={
     i} title={
     v.title}/>;
                        })
                    }
                </Steps>
                {
     
                    React.Children.map(this.props.children, (child, i) => {
     
                        return <div style={
     {
     display: (i === this.props.stepIndex ? 'block' : 'none')}}>
                            {
     child}
                        </div>;
                    })
                }
                <div className="step-btn-content" style={
     {
     padding:'20px 0'}}>
                    <a type="primary" className="step-btn preview-btn"
                       style={
     {
     display: ((this.props.stepIndex > this.props.confirmIndex) || this.props.stepIndex === 0) ? 'none' : 'inline-block'}}
                       onClick={
     () => {
     
                           setStepWillChange(this.props.dispatch, this.props.stepIndex - 1);
                       }}>上一步</a>
                    {
     
                        Final.needTemp && (this.props.needTemp !== false) && this.props.stepIndex <= this.props.confirmIndex &&
                        <Temp temp={
     this.props.temp} reFull={
     this.props.reFull} getTemp={
     this.props.getTemp}/>
                    }
                    {
     this.props.stepIndex !== this.props.confirmIndex && <a type="primary" className="step-btn next-btn"
                                                                            style={
     {
     display: this.props.stepIndex === this.props.confirmIndex + 1 ? 'none' : 'inline-block'}}
                                                                            onClick={
     () => {
     
                                                                                setStepWillChange(this.props.dispatch, this.props.stepIndex + 1);
                                                                            }}>下一步</a>}
                    <a type="primary" id="submitStepBtnText" className={
     visitFrom=='shzww'?'step-btn next-btn shzww-tj':'step-btn next-btn'}
                       style={
     {
     display: this.props.stepIndex === this.props.confirmIndex ? 'inline-block' : 'none'}}
                       onClick={
     () => {
     
                           setStepWillChange(this.props.dispatch, this.props.stepIndex + 1);
                       }}>提交</a>
                </div>
            </div>
        );
    }
}

export default connect(
    (state) => {
     
        return {
     
            stepIndex: state.common.stepIndex,
            confirmIndex: state.common.confirmIndex
        };
    }
)(StepView);

{
     
     React.Children.map(this.props.children, (child, i) => {
     
         return <div style={
     {
     display: (i === this.props.stepIndex ? 'block' : 'none')}}>
             {
     child}
         </div>;
     })
 }

//! zhy added 特别纳税调整相互协商程序申请
import React, {
     Component} from 'react';
import StepView from 'biz/components/steps/index';
import Wc,{
     ylztRender} from 'src/common/wc';
import {
     setConfirmStep} from 'actions/common';
import {
     connect} from 'react-redux';
import Sqtx from './Sqtx';
import YlTj from './Yltj';
import {
      jblRender } from 'biz/components/blzt/jbl';
import {
     option} from './option';

const stepSource = [
   {
     
       title: '填写申请表'
   },
   {
     
       title: '预览提交'
   },
   {
     
       title: '审核中'
   },
   {
     
       title: '完成'
   }
];
const constBlzt = {
     
   swsxMc: option.swsxMc,
   blzt: jblRender
}

class Index extends Component {
     
   componentDidMount() {
     
       setConfirmStep(this.props.dispatch, 1);
   }
   
   temp(callback){
      //todo 暂存
       let data = this.Sqtx.getWrappedInstance().getTemp();
       let requestData = {
     
           swsxDm: this.props.swsxDm,
           data: JSON.stringify(data),
           sqxh: this.props.sqxh
       };
       callback(requestData);
   }
   
   getTemp(data){
      //todo 获取暂存
       let tempData = JSON.parse(data.data);
       this.Sqtx.getWrappedInstance().setTemp(tempData);
   }
   render() {
     
       const {
     stepIndex, stepWillChangeTo, blztDm} = this.props;
       let temp = true;
       return (
           <div>
               {
     
                   ylztRender(<StepView stepSource={
     stepSource} 
                               needTemp={
     temp} 
                               temp={
     (callback) => {
      this.temp(callback)}} 
                               getTemp={
     (data) => {
     this.getTemp(data)}}
                              >
                       <Sqtx ref={
     ref => {
      this.Sqtx = ref}} 
                           stepIndex={
     stepIndex} 
                           stepWillChangeTo={
     stepWillChangeTo} 
                           indexKey={
     0}
                       />
                       <YlTj ylType="pdf" 
                           stepIndex={
     stepIndex} 
                           stepWillChangeTo={
     stepWillChangeTo} 
                           indexKey={
     1}
                       />
                       <Wc ylComponent={
     YlTj}
                           constBlzt={
     constBlzt} 
                           stepIndex={
     stepIndex} 
                           stepWillChangeTo={
     stepWillChangeTo} 
                           indexKey={
     2} 
                           swsx={
     option.swsxDm} 
                           blzt={
     blztDm}
                       />
                   </StepView>, YlTj, constBlzt)
               }
           </div>
       );
   }
}

export default connect(state => {
     
   return {
     
       stepIndex: state.common.stepIndex,
       stepWillChangeTo: state.common.stepWillChangeTo,
       blztDm: state.common.blztStore.blztDm,
       swsxDm: state.common.swsxDm,
       sqxh: state.common.sqxh,
       area:state.common.area
   };
})(Index);