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);