ReactJS UI Ant Design 骨架组件

Ant Design 是一个由阿里巴巴集团开发的一套企业级 UI 组件库，拥有完整的 ReactJS 实现。Ant Design 骨架组件辅助开发者快速实现页面的加载过程，为用户提供更好的加载体验。本文将介绍 Ant Design 骨架组件的使用方法。

安装

安装依赖：

npm install antd --save

安装骨架屏组件：

npm install @ant-design/pro-skeleton --save

使用方法

骨架组件适用于一个页面正在加载时展示的占位符。以下是骨架屏组件的基本用法：

import React, { useState, useEffect } from 'react';
import { Skeleton } from 'antd';
import ProSkeleton from '@ant-design/pro-skeleton';

export default function MyComponent() {
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    setTimeout(() => {
      setLoading(false);
    }, 2000);
  }, []);

  return (
    <div>
      <Skeleton loading={loading} active />
      <ProSkeleton type="list" loading={loading} />
    </div>
  );
}

以上代码中，Skeleton 和 ProSkeleton 是 Ant Design 骨架屏组件。我们使用 useState Hook 来定义一个用于表示页面是否正在加载的变量 loading。在 useEffect Hook 中，我们可以使用 setTimeout 来模拟页面加载过程，然后将 loading 设置为 false。这样一来，骨架屏组件就会隐藏，实际页面内容就可以显示在页面上。

通过以上例子的学习，你已经可以掌握骨架屏组件的基本用法了。如果你想要深入学习 Ant Design 的其他组件和其高级用法，请访问 Ant Design 官网。