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