需求要做一個進度條，發現antd沒有符合的樣式，於是自己寫了一個，使用react + 無狀態元件封裝完成
這是進度條的效果圖：

可複製到專案，只需要3行程式碼就可以直接使用，
傳參（isStatus：num ; 當前的值，actionList：Array; 進度條所有的項 ）使用：

JSX程式碼如下：

import React from 'react';
import './order_proBar.less'
  const OrderProgress = (props) => {   
    let isShow = {  display: 'none' }                                       //是否顯示文字的3種狀態
    let isTrue = { display: 'block' }
    let nowTrue = { color: '#fff' }                                         //綠色圓圈的3種狀態
    let gray= { color: 'gray', background: '#fff'}
    let green= { positive: 'absolute', background: '#fff', border: '1px solid rgba(117,200,43,1)' }
    let nowPic = { color: 'gray', background: 'rgba(117,200,43,1)', border: '1px solid rgba(117,200,43,1)' }
    let lineGreen = { border: '1px solid rgba(117,200,43,1)' }                //線顏色
    let lineGray = { border: '1px solid rgba(0,0,0,0.15)' }
    let reight = { width: '8px', height: '16px',borderColor: 'rgba(117,200,43,1)',borderStyle: 'solid',borderWidth: '0 2px 2px 0',transform: 'rotate(45deg)',position: 'absolute',top: '5',left: '9'}
    const { actionList, isStatus } = props;
    return(<div>
        <div className='orderProgressBar' >
          <div style={{ display: 'flex'}}>
          {
            actionList && actionList.length && actionList.map((item, index) => {
              let nowStatus = index+1
              let color = isStatus === nowStatus ?  nowTrue : isStatus > nowStatus ? reight : isTrue
              let pic = isStatus === nowStatus ?  nowPic : isStatus > nowStatus ? green : gray
              let isNum =  isStatus <= nowStatus ? isTrue : isShow
              return (<div style={{ display: 'flex' }} >
                <div className='checkoutOrder'  >
                  <div className='isRight' style={ pic }>
                    <span style={ color } >
                      <span style={ isNum }>{index+1}</span>
                    </span>
                  </div>
                  <b>{item}</b>
                </div>
                { index < actionList.length - 1 && 
                  <span className='Barline' style={ isStatus >= (index+2) ? lineGreen : lineGray }></span> }
              </div>)
            })
          }
      </div>
    </div>
  </div> )
}

export default OrderProgress
 

css程式碼如下：

.orderProgressBar {
  width: 100%;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.Barline {
  margin: 15px -17px 0 -30px;
  width: 212px;
  height: 1px;
  border: 1px solid green;
}
.checkoutOrder {
  text-align: center;
  .isRight {
    // border: 1px solid red;
    margin: auto;
    width: 30px;
    height: 30px;
    line-height: 30px;
    border-radius: 50%;
    border:1px solid#999;
    // background: '#fff';
    position: relative;
  }
  b {
    display: block;
    margin-top: 7px;
  }
}