扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >react Table准备Spin Empty ConfigProvider组件实现
  • 734

0
分享到

react Table准备Spin Empty ConfigProvider组件实现

react Table组件Spin Empty ConfigProvider实现 2023-02-01 12:02:04 734人浏览 独家记忆
摘要

目录前言目录结构开搞ConfigProviderEmpty组件实现Spin组件前言 继续搞React组件库，该写table了，学习了arco design的table的运行流程，发

前言

继续搞React组件库，该写table了，学习了arco design的table的运行流程，发现准备工作还是挺多的，我们就先解决以下问题吧!

  • 实现ConfigProvider

比如你要配置国际化，组件库的所有组件都要共享当前语言的变量，比如是中文，还是英文，这样组件才能渲染对应国家的字符串。

也就是说，你自己的组件库有什么想全局共享的变量，就写在这个组件里。

table使用的地方

  const {
    getPrefixCls, // 获取CSS前缀
    loadingElement, // loading显示的组件
    size: ctxSize, // size默认值
    renderEmpty, // 空数据时Empty组件显示的内容
    componentConfig, // 全局component的config
  } = useContext(ConfiGContext);

我简单解释一下，getPrefixCls获取了组件的css前缀，比如arco deisgn 的前缀自然是arco了，他们的组件的所有css都会加上这个前缀，现在组件库都这么玩。

其他的就不详细描述了，比如table请求数据有loading，你想自定义loading样式可以在loadingElement属性上配置等等，也就是说全局你自定义的loading组件，所有组件都会共享，不用你一个一个去配置了。

而这里的 useContext(ConfigContext) ConfigContext就是ConfigProvider组件创建的context，类似这样（细节不用纠结，后面我们会实现这个组件）：

export const ConfigContext = createContext<ConfigProviderProps>({
  getPrefixCls: (componentName: string, customPrefix?: string) => `${customPrefix || defaultProps.prefixCls}-${componentName}`,
  ...defaultProps,
});
 <ConfigContext.Provider value={config}>{children}</ConfigContext.Provider>;
  • Spin组件

Spin组件就是显示loading态的组件,这里改造了arco的Spin组件，主要添加了样式层，我认可将样式层和js控制的html，也就是jsx分层

主要体现在，组件里新增getClassnames和getStyles两个函数，配合css，收敛所有组件的样式。

在复杂组件里，我还会尝试收敛数据层和渲染层，但是spin组件和后面的empty组件太简单了，就没有做这步

在table中这样使用

<Spin element={loadingElement} {...loading}>
        {renderTable()}
</Spin>

Empty组件

table组件没有数据的时候就会显示它

这篇基本全是代码，大家简单看看就好，重点是下一篇将table组件,这里主要是做个记录

目录结构

├── ConfigProvider 
│   ├── config // 配置文件
│   │   ├── constants.tsx // 常量
│   │   └── utils_fns // 工具函数文件夹
│   ├── index.tsx
│   └── interface.ts // ts定义文件
├── Empty
│   ├── config  // 配置文件
│   │   ├── constants.ts
│   │   └── utils_fns // 工具函数文件夹
│   │       ├── getDesDefault.ts
│   │       ├── xxx
│   │       └── index.ts
│   ├── index.tsx
│   ├── interface.ts  // ts定义文件
│   └── style // 样式文件
│       ├── index.less
│       └── index.ts
├── Icon // Icon是单独一个项目，自动化生成Icon，还有点复杂度的，这个后面组件库详细讲吧
│   ├── index.tsx
│   └── style
│       └── index.less
├── Spin
│   ├── config
│   │   ├── hooks // 自定义hook
│   │   └── utils_fns
│   ├── index.tsx
│   ├── interface.ts
│   └── style
│       ├── index.less
│       └── index.ts
├── Table
│   ├── config
│   │   └── util_fns
│   └── table.tsx
├── config // 公共配置文件
│   ├── index.ts
│   └── util_fns
│       ├── index.ts
│       └── pickDataAttributes.ts
├── index.ts
├── locale // 国际化文件夹
│   ├── default.tsx
│   ├── en-US.tsx
│   ├── interface.tsx
│   └── zh-CN.tsx
└── style // 样式文件夹
    ├── base.less
    ├── common.less
    ├── index.less
    ├── nORMalize.less
    └── theme

开搞ConfigProvider

index.tsx，详情见注释

import React, { createContext, useCallback, useMemo } from 'react';
// omit相当于lodash里的omit，不过自己写的性能更好，因为没有那么多兼容性，很简单
// useMergeProps是合并外界传入的props，和默认props还有组件全局props的hook
import { omit, useMergeProps } from '@mx-design/utils';
// 国际化文件，默认是中文
import defaultLocale from '../locale/default';
// 接口
import type { ConfigProviderProps } from './interface';
// componentConfig是空对象
// PREFIX_CLS是你想自定义的css样式前缀
import { componentConfig, PREFIX_CLS } from './config/constants';
// 渲染空数据的组件
import { renderEmpty } from './config/utils_fns';
// 默认参数
const defaultProps: ConfigProviderProps = {
  locale: defaultLocale,
  prefixCls: PREFIX_CLS,
  getPopupContainer: () => document.body,
  size: 'default',
  renderEmpty,
};
// 默认参数
export const ConfigContext = createContext<ConfigProviderProps>({
  ...defaultProps,
});
function ConfigProvider(baseProps: ConfigProviderProps) {
  // 合并props，baseProps也就是用户传入的props优先级最高
  const props = useMergeProps<ConfigProviderProps>(baseProps, defaultProps, componentConfig);
  const { prefixCls, children } = props;
// 获取css前缀名的函数
  const getPrefixCls = useCallback(
    (componentName: string, customPrefix?: string) => {
      return `${customPrefix || prefixCls || defaultProps.prefixCls}-${componentName}`;
    },
    [prefixCls]
  );
 // 传递给所有子组件的数据
  const config: ConfigProviderProps = useMemo(
    () => ({
      ...omit(props, ['children']),
      getPrefixCls,
    }),
    [getPrefixCls, props]
  );
// 使用context实现全局变量传递给子组件的目的
  return <ConfigContext.Provider value={config}>{children}</ConfigContext.Provider>;
}
ConfigProvider.displayName = 'ConfigProvider';
export default ConfigProvider;
export type { ConfigProviderProps };

注意在default中，有个renderEmpty函数，实现如下：

export function renderEmpty() {
  return <Empty />;
}

所以，我们接着看Empty组件如何实现

这里顺便贴一下ConfigProvider中的类型定义，因为初期组件比较少，参数不多，大多数从arco deisgn源码copy的

import { Reactnode } from 'react';
import { Locale } from '../locale/interface';
import type { EmptyProps } from '../Empty/interface';
import type { SpinProps } from '../Spin/interface';
export type ComponentConfig = {
  Empty: EmptyProps;
  Spin: SpinProps;
};

export interface ConfigProviderProps {
  
  componentConfig?: ComponentConfig;
  
  locale?: Locale;
  
  size?: 'mini' | 'small' | 'default' | 'large';
  
  prefixCls?: string;
  getPrefixCls?: (componentName: string, customPrefix?: string) => string;
  
  getPopupContainer?: (node: HTMLElement) => Element;
  
  loadingElement?: ReactNode;
  
  renderEmpty?: (componentName?: string) => ReactNode;
  zIndex?: number;
  children?: ReactNode;
}

Empty组件实现

index.tsx

import React, { memo, useContext, forwardRef } from 'react';
import { useMergeProps } from '@mx-design/utils';
import { ConfigContext } from '../ConfigProvider';
import type { EmptyProps } from './interface';
import { emptyImage, getDesDefault } from './config/utils_fns';
import { useClassNames } from './config/hooks';
function Empty(baseProps: EmptyProps, ref) {
  // 获取全局参数
  const { getPrefixCls, locale: globalLocale, componentConfig } = useContext(ConfigContext);
  // 合并props
  const props = useMergeProps<EmptyProps>({}, componentConfig?.Empty, baseProps);
  const { style, className, description, icon, imgSrc } = props;
  // 获取国际化的 noData字符串
  const { noData } = globalLocale.Empty;
  // class样式层
  const { containerCls, wrapperCls, imageCls, descriptionCls } = useClassNames({ getPrefixCls, className });
  // 获取描述信息
  const alt = getDesDefault(description);
  return (
    <div ref={ref} className={containerCls} style={style}>
      <div className={wrapperCls}>
        <div className={imageCls}>{emptyImage({ imgSrc, alt, icon })}</div>
        <div className={descriptionCls}>{description || noData}</div>
      </div>
    </div>
  );
}
const EmptyComponent = forwardRef(Empty);
EmptyComponent.displayName = 'Empty';
export default memo(EmptyComponent);
export type { EmptyProps };

useClassNames,主要是通过useMemo缓存所有的className，一般情况下，这些className都不会变

import { cs } from '@mx-design/utils';
import { useMemo } from 'react';
import { ConfigProviderProps } from '../../../ConfigProvider';
import { EmptyProps } from '../..';
interface getClassNamesProps {
  getPrefixCls: ConfigProviderProps['getPrefixCls'];
  className: EmptyProps['className'];
}
export function useClassNames(props: getClassNamesProps) {
  const { getPrefixCls, className } = props;
  const prefixCls = getPrefixCls('empty');
  const classNames = cs(prefixCls, className);
  return useMemo(
    () => ({
      containerCls: classNames,
      wrapperCls: `${prefixCls}-wrapper`,
      imageCls: `${prefixCls}-image`,
      descriptionCls: `${prefixCls}-description`,
    }),
    [classNames, prefixCls]
  );
}

getDesDefault，

import { DEFAULT_DES } from '../constants';
export function getDesDefault(description) {
  return typeof description === 'string' ? description : DEFAULT_DES;
}

getEmptyImage

import { IconEmpty } from '@mx-design/icon';
import React from 'react';
import { IEmptyImage } from '../../interface';
export const emptyImage: IEmptyImage = ({ imgSrc, alt, icon }) => {
  return imgSrc ? <img alt={alt} src={imgSrc} /> : icon || <IconEmpty />;
};

Spin组件

也很简单，值得一提的是，你知道写一个debounce函数怎么写吗，很多网上的人写的简陋不堪，起码还是有个cancel方法，好吧，要不你useEffect想在组件卸载的时候，清理debounce的定时器都没办法。

debounce实现

interface IDebounced<T extends (...args: any) => any> {
  cancel: () => void;
  (...args: any[]): ReturnType<T>;
}
export function debounce<T extends (...args: any) => any>(func: T, wait: number, immediate?: boolean): IDebounced<T> {
  let timeout: number | null;
  let result: any;
  const debounced: IDebounced<T> = function (...args) {
    const context = this;
    if (timeout) clearTimeout(timeout);
    if (immediate) {
      let callNow = !timeout;
      timeout = window.setTimeout(function () {
        timeout = null;
      }, wait);
      if (callNow) result = func.apply(context, args);
    } else {
      timeout = window.setTimeout(function () {
        result = func.apply(context, args);
      }, wait);
    }
    // Only the first time you can get the result, that is, immediate is true
    // if not，result has little meaning
    return result;
  };
  debounced.cancel = function () {
    clearTimeout(timeout!);
    timeout = null;
  };
  return debounced;
}

顺便我们在写一个useDebounce的hook吧，项目中也要用

import { debounce } from '@mx-design/utils';
import { useCallback, useEffect, useState } from 'react';
import type { SpinProps } from '../../interface';
interface debounceLoadingProps {
  delay: SpinProps['delay'];
  propLoading: SpinProps['loading'];
}
export const useDebounceLoading = function (props: debounceLoadingProps): [boolean] {
  const { delay, propLoading } = props;
  const [loading, setLoading] = useState<boolean>(delay ? false : propLoading);
  const debouncedSetLoading = useCallback(debounce(setLoading, delay), [delay]);
  const getLoading = delay ? loading : propLoading;
  useEffect(() => {
    delay && debouncedSetLoading(propLoading);
    return () => {
      debouncedSetLoading?.cancel();
    };
  }, [debouncedSetLoading, delay, propLoading]);
  return [getLoading];
};

index.tsx

import React, { useContext } from 'react';
import { useMergeProps } from '@mx-design/utils';
import { ConfigContext } from '../ConfigProvider';
import type { SpinProps } from './interface';
import InnerLoading from './InnerLoading';
import { useClassNames, useDebounceLoading } from './config/hooks';
function Spin(baseProps: SpinProps, ref) {
  const { getPrefixCls, componentConfig } = useContext(ConfigContext);
  const props = useMergeProps<SpinProps>(baseProps, {}, componentConfig?.Spin);
  const { style, className, children, loading: propLoading, size, icon, element, tip, delay, block = true } = props;
  const [loading] = useDebounceLoading({ delay, propLoading });
  const { prefixCls, wrapperCls, childrenWrapperCls, loadingLayerCls, loadingLayerInnerCls, tipCls } = useClassNames({
    getPrefixCls,
    block,
    loading,
    tip,
    children,
    className,
  });
  return (
    <div ref={ref} className={wrapperCls} style={style}>
      {children ? (
        <>
          <div className={childrenWrapperCls}>{children}</div>
          {loading && (
            <div className={loadingLayerCls} style={{ fontSize: size }}>
              <span className={loadingLayerInnerCls}>
                <InnerLoading prefixCls={prefixCls} icon={icon} size={size} element={element} tipCls={tipCls} tip={tip} />
              </span>
            </div>
          )}
        </>
      ) : (
        <InnerLoading prefixCls={prefixCls} icon={icon} size={size} element={element} tipCls={tipCls} tip={tip} />
      )}
    </div>
  );
}
const SpinComponent = React.forwardRef<unknown, SpinProps>(Spin);
SpinComponent.displayName = 'Spin';
export default SpinComponent;
export { SpinProps };

LoadingIcon.tsx

import { IconLoading } from '@mx-design/icon';
import { cs } from '@mx-design/utils';
import React, { FC, ReactElement } from 'react';
import { ConfigProviderProps } from '../../../ConfigProvider';
import type { SpinProps } from '../../interface';
interface loadingIconProps {
  prefixCls: ConfigProviderProps['prefixCls'];
  icon: SpinProps['icon'];
  size: SpinProps['size'];
  element: SpinProps['element'];
}
export const LoadingIcon: FC<loadingIconProps> = function (props) {
  const { prefixCls, icon, size, element } = props;
  return (
    <span className={`${prefixCls}-icon`}>
      {icon
        ? // 这里可以让传入的icon自动旋转
          React.cloneElement(icon as ReactElement, {
            className: `${prefixCls}-icon-loading`,
            style: {
              fontSize: size,
            },
          })
        : element || <IconLoading className={`${prefixCls}-icon-loading`} style={{ fontSize: size }} />}
    </span>
  );
};

以上就是react Table准备Spin Empty ConfigProvider组件实现的详细内容，更多关于react Table组件的资料请关注编程网其它相关文章！

--结束END--

本文标题: react Table准备Spin Empty ConfigProvider组件实现

本文链接: https://lsjlt.com/news/193819.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • react Table准备Spin Empty ConfigProvider组件实现
    目录前言目录结构开搞ConfigProviderEmpty组件实现Spin组件前言 继续搞react组件库，该写table了，学习了arco design的table的运行流程，发...
    99+
    2023-02-01
    react Table组件 Spin Empty ConfigProvider实现
  • React 实现具备吸顶和吸底功能组件实例
    目录背景实现结语背景 现在手机应用经常有这样一个场景： 页面上有一个导航，导航位置在页面中间位置，当页面顶部滚动到导航位置时，导航自动吸顶，页面继续往下滚动时，它就一直在页面视窗顶...
    99+
    2023-02-23
    React吸顶吸底功能 React 功能组件
  • vue怎么实现table-plus组件
    今天小编给大家分享一下vue怎么实现table-plus组件的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。目的配置型表格多级...
    99+
    2023-06-30
  • React如何实现具备吸顶和吸底功能组件
    本篇内容介绍了“React如何实现具备吸顶和吸底功能组件”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！具体要求：需要可以设置是 吸顶 还是 ...
    99+
    2023-07-05
  • React实现动效弹窗组件
    我们在写一些 UI 组件时，若不考虑动效，就很容易实现，主要就是有无的切换（类似于 Vue 中的 v-if 属性）或者可见性的切换（类似于 Vue 中的 v-show 属性）。 1...
    99+
    2024-04-02
  • React Hook实现对话框组件
    React Hook实现对话框组件，供大家参考，具体内容如下 准备 思路：对话框组件是有需要的时候希望它能够弹出来，不需要的时候在页面上是没有任何显示的，这就意味着需要一个状态，在父...
    99+
    2024-04-02
  • React组件通信如何实现
    这篇文章主要介绍“React组件通信如何实现”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“React组件通信如何实现”文章能帮助大家解决问题。1. 父子组件通信方式父子组件之间的通信很常见，其中父组...
    99+
    2023-07-05
  • React星星评分组件的实现
    实现的需求为传入对商品的评分数据，页面显示对应的星星个数。 1. 准备三张对应不同评分的星星图片 2. 期望实现的效果 这样的 调用 <StarScore sco...
    99+
    2024-04-02
  • React 组件权限控制的实现
    目录前话正文1. 控制方式1.1 直接计算1.2 通用权限Hoc1.3 权限包裹组件2. 控制结果2.1 显隐控制2.2 自定义渲染3. 权限数据3.1 静态权限3.2 动态权限前话...
    99+
    2024-04-02
  • React 组件间怎么实现通信
    本篇文章给大家分享的是有关React 组件间怎么实现通信，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。父子组件通讯通讯手段这是最常见的通信方式...
    99+
    2024-04-02
  • React如何实现倒计时组件
    这篇文章将为大家详细讲解有关React如何实现倒计时组件，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。倒计时组件&mdash;&mdash;需求描述：写一个函数式组件CountDown，设...
    99+
    2023-06-29
  • React+Ts实现二次封装组件
    目录前言样式类型扩展功能扩展 继承 修改 拦截前言 在react中相信大家用的最多的组件库就是Antd了，可是往往在公司的实际开发过程中，我们会发现ui给的设计图和组件有着不小的差别...
    99+
    2023-05-17
    React Ts封装组件 React Ts组件
  • vue2中如何实现table分页组件
    这篇文章主要介绍了vue2中如何实现table分页组件，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。具体内容如下pagination.js:...
    99+
    2024-04-02
  • Vue和React组件怎么实现传值
    本篇文章为大家展示了Vue和React组件怎么实现传值，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。组件间的传值方式组件的传值场景无外乎以下几种：父子之间兄弟之间多...
    99+
    2024-04-02
  • react实现Radio组件的示例代码
    本文旨在用最清楚的结构去实现一些组件的基本功能。希望和大家一起学习，共同进步 效果展示： 测试组件： class Test extends Component { cons...
    99+
    2024-04-02
  • react-beautiful-dnd 实现组件拖拽功能
    目录1.安装2.APi3.react-beautiful-dnd demo3.1 demo1 纵向组件拖拽3.2 demo2 水平拖拽3.3 demo3实现一个代办事项的拖拽（纵向 ...
    99+
    2024-04-02
  • React如何实现跨级组件通信
    这篇文章主要介绍React如何实现跨级组件通信，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！跨级组件通信假设一个父组件中存在一个子组件，这个子组件中又存在一个子组件，暂且称为“孙组件...
    99+
    2024-04-02
  • React如何实现父子组件通信
    这篇文章主要介绍React如何实现父子组件通信，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！父子组件通信原理：父组件通过props（与vue中的props区分开）向子组件通信，子组件...
    99+
    2024-04-02
  • react如何实现页面组件跳转
    这篇文章主要介绍了react如何实现页面组件跳转，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。 跳转方法：1、利...
    99+
    2024-04-02
  • react-beautiful-dnd如何实现组件拖拽
    这篇文章将为大家详细讲解有关react-beautiful-dnd如何实现组件拖拽，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。1.安装在已有react项目中 执行以下命令 so easy。# ...
    99+
    2023-06-20
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作