博客

不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来控制进度条当前位置的