react进度条组件开发

进度条组件开发

一、创建一个Progress.js文件：

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

export default class Progress extends Component {

    constructor(props) {
        super(props)
    }

    renderProgress () {
        const progressItemStyle = {
           //  进度条的进度分成100份
            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>
            //     )
            // }