快捷導(dǎo)航

React插槽之React.Children的使用小結(jié)

更新時間：2026年06月20日 10:26:36 作者：英俊瀟灑美少年

本文深入解析React.Children API的使用方法,包括map、forEach、count、only等實用功能,通過具體代碼示例展示如何管理和操作props.children,感興趣可以了解一下

React.Children.map

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

在 children 里的每個直接子節(jié)點上調(diào)用一個函數(shù)，并將 this 設(shè)置為 thisArg。如果 children 是一個數(shù)組，它將被遍歷并為數(shù)組中的每個子節(jié)點調(diào)用該函數(shù)。如果子節(jié)點為 null 或是 undefined，則此方法將返回 null 或是 undefined，而不會返回數(shù)組。

如果 children 是一個 Fragment 對象，它將被視為單一子節(jié)點的情況處理，而不會被遍歷。

React.Children.forEach

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

與 React.Children.map() 類似，但它不會返回一個數(shù)組。

React.Children.count

React.Children.count(children)

返回 children 中的組件總數(shù)量，等同于通過 map 或 forEach 調(diào)用回調(diào)函數(shù)的次數(shù)。

React.Children.only

React.Children.only(children)

驗證 children 是否只有一個子節(jié)點（一個 React 元素），如果有則返回它，否則此方法會拋出錯誤。

注意：

React.Children.only() 不接受 React.Children.map() 的返回值，因為它是一個數(shù)組而并不是 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 特別納稅調(diào)整相互協(xié)商程序申請
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: '預(yù)覽提交'
   },
   {
       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);

到此這篇關(guān)于React插槽之React.Children的使用小結(jié)的文章就介紹到這了,更多相關(guān)React.Children 使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: