不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(
)
} else {
ele.push(
)
}
}
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 (
{this.props.index + 1}/10
{this.renderProgress()}
)
}
}
Progress.propTypes = {
nums: PropTypes.number.isRequired,index: PropTypes.number.isRequired,progressColor: PropTypes.string.isRequired
};
就这样调用
最后实现的效果
然后几个点来提一下，
nums: 进度条需要区分的个数，
index: 当前进度条所处的位置，
progressColor: 进度条颜色，
然后重点是这个renderProgress函数，是根据index来控制进度条当前位置的
