基于react的一个进度条组件

1.在react建一个js文件写组件代码:

import React, {Component, PropTypes} from 'react';
export default class Progress extends Component {
static contextTypes = {
percentageNum: PropTypes.number,
allNum: PropTypes.number,
progressName: PropTypes.string
};
constructor(props) {
super(props)
}
render() {
let percentageNum = (this.props.percentageNum*100);
//这个支持css样式响应式的
let leftPercentage = (1-this.props.percentageNum)*(-100);
//不支持样式响应式,可以写死
// let leftPercentage = (1-this.props.percentageNum)*(-450);
let div1 = {
//不支持样式响应式,可以写死
// width:"450px"
//这个支持css样式响应式的
width:"90%",
height:"45px",
background:"#dedede",
position: "relative",
margin:"22px auto 0",
overflow: "hidden",
};
let div2 = {
//不支持样式响应式,可以写死
// width:"450px"
//这个支持css样式响应式的
width:"100%",
height:"45px",
background:"#1AAAA8",
position: "absolute",
//不支持样式响应式,可以写死
// left:`${leftPercentage}px`,
//这个支持css样式响应式的
left:`${leftPercentage}%`,
};
let div3 = {
position: "absolute",
width:"auto",
height:"45px",
left:"15px",
color:"#ffffff",
lineHeight: "45px",
fontSize: "16px",
};
let div4 ={
position: "absolute",
width:"auto",
height:"45px",
right:"15px",
lineHeight: "45px",
fontSize: "16px",
color: "#7B7B7B",
};
return (
<div style={div1}>
<div style={div2}></div>
<div style={div3}>{this.props.progressName}</div>
<div style={div4}>
{percentageNum}%
|
{this.props.allNum}
</div>
</div>
)
}
}

2.在你的项目中引入,具体看你那边的相对路径

import Progress from 'components/TopNext/ProgressNum';

3.使用,progressName是显示名字,percentageNum是显示的小数点百分比,这个参数最重要,allNum一个随便显示的数据,要不要都可以

<Progress allNum={10} percentageNum={0.33} progressName='小明' />

4.示例图