Запись машинописного текста реагирует на запись компонента индикатора выполнения

внешний интерфейс GitHub TypeScript React.js

Начало работы с TypeScript, написание компонента индикатора выполнения реакции

пиши на фронт

  • Если вы писали React-компоненты, эта статья для вас в принципе не сложна. Чисто с небольшим знанием ц.
  • Я полностью описываю процесс написания компонентов с точки зрения ученика, пожалуйста, укажите много неточностей, ха-ха.

Взгляните на достигнутый эффект - эффект gif-анимации

image

  • Конечно, вы можете нажать здесь, чтобы попробовать эффект самостоятельно.Страница эффектов
  • Вы также можете открыть codeSandbox ниже, чтобы взглянуть на исходный код.
Edit 940nq3531y

начать

  • Это обычный UI компонент, и сложность в основном в дизайне (css).

  • Требование: пошаговая панель точности, нам нужно только ввести параметры, шаг и сумму, чтобы рассчитать процент, а затем отобразить его, хорошо.


/*
* @param step 第几步
* @param total 总共的步骤
* @param showInfo  是否需要显示百分比提示
* @param color 可以自定义颜色
*/

Достаточно сказано, давайте начнем

  • Конфигурация окружения пропущена, тут напрямую пишем код
  • Необходимо настроить node, ts, меньше среды

1, progressBar создает папку в вашем файле компонентов. tsx реагирует на специальные файлы ts. Затем продолжайте добавлять index.tsx и style.less в progressBar ниже.

-- 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<IProgressProps> {

}

export default ProgressBar;

要点: IProgressProps, названный с использованием паскаля, с использованиемIВ начале Props представляет поддержку параметров этого интерфейса.

3. Согласно анализу наших требований выше, давайте определим интерфейс, определим propTypes и defalutProps класса

export interface IProgressProps {
    // prefixCls 为了以后样式统一设置的 classname
    
    prefixCls?: string;
    step?: number;
    total?: number;
    showInfo?: boolean;
    color?: string;
}

class ProgressBar extends Component<IProgressProps> {
    //设置默认值
    static defaultProps = {
            prefixCls: 'demo-progress',
            step: 2,
            total: 10,
            showInfo: false,
            color: '#FFE103'
        };
    render(){
        return(
            <div>progressBar</div>
        )
    }
}

  • фокус, объяснил здесь.为什么用了 ts 和还用 prop-types？Чтобы ограничить код, после публикации статьи некоторые друзья указали, что она повторяется. Потому что я не заметил этого в начале написания ts, а потом сосредоточился на проверке актуальной информации. Выяснилось, что их можно смешивать.

  • В заключение

Вы можете использовать только typescript для проверки, вы можете использовать только prop-types для проверки, или вы можете смешивать и сопоставлять два для проверки, Это не строго ограничено.Проверка подсказок с помощью машинописного текста — это функция языка ts, а использование prop-types для проверки подсказок — это функция, добавленная в react.

要点: "?" является необязательным, а число является типом параметра интерфейса. Это означает, что то, что вы вводите, должно быть числовым типом, иначе ts сообщит об ошибке. Здесь мы можем обратиться к модулю progressBar, чтобы убедиться, что он успешен. Если progressBar реализован, это означает успех.

4, обработка индикации прогресса UI и контент текста, визуализация

/**
 * @desc  处理 progressNumber
 */
const validProgress = (progress: number | undefined) => {
  //当你的参数定义了 number 等类型，你必须对 !progress 的时候处理，不然 ts 会提示你错误。
  if (!progress || progress < 0) {
    return 0;
  } else if (progress > 100) {
    return 100;
  }

  return progress;
};

/**
 * @desc 除法处理成0-100的整数
 * @param step
 * @param total
 */
const percentDeal = (step: number | undefined, total: number | undefined) => {
  if (!step || !total) {
    return 0;
  }

  return (step / total) * 100;
};

/**
 * @param text 百分比显示
 */
const parseIntPrecent = (text: number): string => `${Math.ceil(text)}%`;

class ProgressBar extends Component<IProgressProps> {
   /* ...
    ....defaultProps
    .....propTypes
    ......
   */
    render(){
        // 把需要的值先从 this.props 中取出来
        // restProps 扩充参数用
        const {
            prefixCls,
            step,
            total,
            showInfo,
            color,
            ...restProps
        } = this.props;
        
        /**
         * percent 百分比
         * text tip 显示文字
         * progressInfo 提示模块
         * porgress 主模块
         */
        let percent;
        let text;
        let progressInfo;
        let progress;
        
        //处理百分比显示内容
        percent = percentDeal(step, total);
        text = parseIntPrecent(validProgress(percent));
        
        // 如果 true 的话，我们使用创建一个 showInfo 模块
        if (showInfo) {
            progressInfo = (
                <div className={`${prefixCls}-show-info`}>
                  <span className={`${prefixCls}-text`}>{text}</span>
                </div>
            );
        }
        
        //创建一个主模块用做进度条
        //prefixCls 这里统一了命名
        progress = (
          <div>
            <div className={`${prefixCls}-outer`}>
              <div className={`${prefixCls}-inner`}>
                <div className={`${prefixCls}-bg`}>
                  {progressInfo || null}
                </div>
              </div>
            </div>
          </div>
        );
        
        return (
          <div {...restProps} className={`${prefixCls}`}>
            {progress}
          </div>
        );
    }
}

要点: Определите функцию, которая обрабатывает данные вне класса, не обрабатывайте данные в рендере. Существует много реализации панели прогресса, вот обычные три слоя, текст, фон, прогресс бар и внешний слой.

5. Реализуйте стиль в соответствии с приведенным выше дизайном gif.

  • style.less
.tiger-progress {
    &-outer {
        width: 100%;
        display: inline-block;
        margin-top:30px;
        margin-right: 0;
        padding-right: 0;
    }
    &-inner {
        vertical-align: middle;
        display: inline-block;
        background: #eeeeee;
        border-radius: 100px;
        position: relative;
        width: 100%;
    }
//预留 &-bg 背景颜色代表进度条的长度，灰色的 inner 背景
    &-line {
        width: 100%;
        font-size: inherit;
        position: relative;
    }
    &-text {
        word-break: normal;
        width: 2em;
        text-align: left;
        font-size: 1em;
        margin-left: 8px;
        vertical-align: middle;
        display: inline-block;
        white-space: nowrap;
        line-height: 1;
    }
}

要点: // &-bg Цвет представляет длину индикатора выполнения, а серый &-внутренний фон — общую длину.

  • Дополнить код в рендере, и установить длину индикатора выполнения в соответствии с данными, рассчитанными по шагу ввода и сумме.
 const {
        prefixCls,
        step,
        total,
        showInfo,
        color,
        ...restProps
    } = this.props;
        
/**
 * percent 百分比
 * text tip 显示文字
 * progressInfo 提示模块
 * porgress 主模块
 */
let percent;
let text;
let progressInfo;
let progress;

percent = percentDeal(step, total);
console..log("percent",percent)
// percent: 20

text = parseIntPrecent(validProgress(percent));
console.log('text',text)
// text: 20%

if (showInfo) {
  progressInfo = (
    <div className={`${prefixCls}-show-info`}>
      <span className={`${prefixCls}-text`}>{text}</span>
    </div>
  );
}

// color defalutProps 定义默认的颜色
// 前面&-bg 设置 relative 定位
const fixBgStyle = {
  width: text,
  height: "12px",
  background: color,
  borderRadius: "100px"
};

progress = (
  <div>
    <div className={`${prefixCls}-outer`}>
      <div className={`${prefixCls}-inner`}>
        <div className={`${prefixCls}-bg`} style={fixBgStyle}>
          {progressInfo || null}
        </div>
      </div>
    </div>
  </div>
);

return (
  <div {...restProps} className="tiger-progress">
    {progress}
  </div>
);

ты закончил

Ответьте на вопрос: зачем использоватьtsтакже использоватьprop-types?

  • Обычно мы пишемreactКогда мы будем, мы определим одинprop-typesпроверить нашclassввод параметра. в то время как ТСinterfaceКонечно, роль также заключается в проверкеpropsввод.

  • 两者的区别:TypeScripпроверка типов статическая,prop-typesМожно проверить во время выполнения. как вы проходитеoffsetTop="abc", ваш редактор может сообщить вам, что тип неверен, но в браузере он все равно работает нормально. и если вы используетеprop-types, в браузере появится подсказка.

Резюме: Таким образом, их можно смешивать,功能上有部分重复, поэтому мы не можем писать после использования машинописного текстаprop-typesделать дополнительночек об оплате.

Ссылаться на

Категории