ReactJS 语义 UI 占位符元素

在编写 React 应用时，我们经常需要使用占位符元素来表示正在加载或者某些操作正在进行中。而 Semantic UI 是一个非常流行的前端 UI 框架，提供了许多有用的占位符元素，可以帮助我们快速构建通知、加载状态等 UI 元素。

在 React 中，我们可以使用 Semantic UI 提供的占位符元素，以及一些自定义的占位符元素，来帮助我们更轻松地构建 UI 元素。下面是一些常用的占位符元素：

Semantic UI 占位符元素

Loader

Loader 可以用来表示正在加载数据或者操作正在进行中。

import { Loader } from 'semantic-ui-react';

function MyComponent() {
  return <Loader active />;
}

这里的 active 属性表示 Loader 要处于活动状态，如果不加这个属性，Loader 将不会显示。

Placeholder

Placeholder 可以用来表示还没有加载完成的数据，或者一些需要等待的操作正在进行中。

import { Placeholder } from 'semantic-ui-react';

function MyComponent() {
  return (
    <Placeholder>
      <Placeholder.Header image>
        <Placeholder.Line />
        <Placeholder.Line />
      </Placeholder.Header>
      <Placeholder.Paragraph>
        <Placeholder.Line length='medium' />
        <Placeholder.Line length='short' />
      </Placeholder.Paragraph>
    </Placeholder>
  );
}

这里的 Placeholder.Header 和 Placeholder.Paragraph 分别表示占位符头部和段落，而 Placeholder.Line 表示一行占位符文本。可以通过 length 属性来控制文本的长度。

Dimmer

Dimmer 可以用来表示某个组件正在等待某些操作完成，以及随时可以取消操作。

import { Dimmer, Loader, Image } from 'semantic-ui-react';

function MyComponent() {
  return (
    <Dimmer active>
      <Loader />
      <Image src='/assets/images/wireframe/short-paragraph.png' />
    </Dimmer>
  );
}

这里使用了 Loader 和 Image 组件来模拟一个需要等待加载数据的组件，而 Dimmer 则表示正在等待操作完成。

自定义占位符元素

除了 Semantic UI 提供的占位符元素之外，我们还可以根据实际需求自定义一些占位符元素。

Spin

Spin 可以用来表示正在加载数据或者操作正在进行中，类似于 Semantic UI 中的 Loader。

import { Spin } from 'antd';
import { LoadingOutlined } from '@ant-design/icons';

function MyComponent() {
  return <Spin indicator={<LoadingOutlined />} />;
}

这里使用了 Spin 和 LoadingOutlined 组件来创建一个自定义占位符元素。indicator 属性表示 Spin 所使用的图标，这里使用了 Ant Design 中的 LoadingOutlined 图标。

Skeleton

Skeleton 可以用来表示还没有加载完成的数据，或者一些需要等待的操作正在进行中。类似于 Semantic UI 中的 Placeholder。

import { Skeleton } from 'antd';

function MyComponent() {
  return (
    <Skeleton active>
      <Skeleton.Image />
      <Skeleton.Title />
      <Skeleton.Paragraph />
    </Skeleton>
  );
}

这里使用了 Skeleton、Skeleton.Image、Skeleton.Title 和 Skeleton.Paragraph 组件来创建一个自定义占位符元素，实现方式类似于 Semantic UI 中的 Placeholder。

总结

在 React 中，我们可以使用 Semantic UI 提供的占位符元素，以及一些自定义的占位符元素，来帮助我们更轻松地构建 UI 元素。无论是 Loader、Placeholder 还是自定义占位符元素，都可以帮助我们更好地处理正在加载或者某些操作正在进行中的情况。