封装进度条（react + 无状态组件，补充antd.desgin进度条）

最新推荐文章于 2024-08-01 14:30:43 发布

Allan_L

最新推荐文章于 2024-08-01 14:30:43 发布

阅读量3k

点赞数

分类专栏：前端 react 无状态组件文章标签： React 无状态组件进度条 css 画对勾

本文链接：https://blog.csdn.net/Allan_L/article/details/84071144

版权

本文介绍如何使用React和无状态组件封装一个自定义进度条，以满足特定样式需求。通过提供isStatus和actionList参数，仅需3行代码即可轻松集成到项目中。

摘要由CSDN通过智能技术生成

需求要做一个进度条，发现antd没有符合的样式，于是自己写了一个，使用react + 无状态组件封装完成
这是进度条的效果图：
这是进度条的效果图，使用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: