react实现上传文件进度条功能_Typescript 入门写一个 react 进度条组件

TypeScript 入门，写一个 react 进度条组件

写在最前面

如果你写过 react 的组件， 这篇文章对与你来说基本没有什么难度。纯粹的是加上了一点 ts 的知识。

我完全是以学习者的姿态来描述我写组件的过程，很多不严谨的地方请大家指出来哈哈。

看看实现的效果-gif 动图效果

当然你可以点击这里亲自试一下效果，效果页面

也可以打开下面 codeSandbox 看一下源代码。

开始动手

这是一个普通的 UI 组件，难点主要在设计(css)上面。

需求：分步骤进行的一个精度条，我们只需要输入参数，step 和 total 来计算出百分比然后显示就 ok 了。

/*

* @param step 第几步

* @param total 总共的步骤

* @param showInfo 是否需要显示百分比提示

* @param color 可以自定义颜色

*/

复制代码

说了这么多开始动手吧

环境配置方面就略过了，这里我们直接来写代码

需要配置 node，ts，less 环境

1、在你的 componments 文件下创建一个 progressBar 文件夹。tsx 是 react下特殊 ts 文件。 然后在 progressBar 下面继续添加 index.tsx 和 style.less

-- componments

-- progressBar

-- index.tsx

-- style.less

复制代码

2、先引进必须的组件

index.tsx

import React, { Component } from 'react';

import * as PropTypes from 'prop-types';

import './style.less';

// 定义接口

export interface IProgressProps{

}

// 定义类

class ProgressBar extends Component{

}

export default ProgressBar;

复制代码要点: IProgressProps ，使用 pascal 命名，用 I打头，Props 是代表这个接口参数支持。

3、根据我们上面需求的分析࿰