react-progress 自定义一个进度条插件

不bibi，直接上代码，

import React,{ Component } from 'react';
import PropTypes from 'prop-types';

export default class Progress extends Component {

    constructor(props) {
        super(props)
    }

    renderProgress () {
        const progressItemStyle = {
            width: `${100/this.props.nums}%`,height: '100%'
        };
        var ele = [];
        for (var i = 0; i < this.props.nums; i++) {
            if (i <= this.props.index) {
                ele.push(
                    <div style={Object.assign(progressItemStyle,{backgroundColor: this.props.progressColor})} key={i}></div>
                )
            } else {
                ele.push(
                    <div style={progressItemStyle} key={i}></div>
                )
            }
        }
        return ele;
    }

    render() {

        const progressStyle = {
            display: '-webkit-flex',color: this.props.progressColor,margin: '0 25px'
        };

        const progressArticleStyle = {
            height: 10,border: '1px solid #dabb84',width: '85%',display: '-webkit-flex',borderRadius: 2,overflow: 'hidden',marginTop: 3
        };

        return (
            <div style={progressStyle}>
                <div style={{width: '15%'}}>
                    {this.props.index + 1}/10
                </div>
                <div style={progressArticleStyle}>
                    {this.renderProgress()}
                </div>
            </div>
        )
    }
}

Progress.propTypes = {
    nums: PropTypes.number.isRequired,index: PropTypes.number.isRequired,progressColor: PropTypes.string.isRequired
};

就这样调用

<Progress nums={10} index={this.state.examIndex} progressColor='#dabb84' />

最后实现的效果

然后几个点来提一下，

nums: 进度条需要区分的个数，

index: 当前进度条所处的位置，

progressColor: 进度条颜色，

然后重点是这个renderProgress函数，是根据index来控制进度条当前位置的

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!