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.示例图
