Element Plus 的 Loading 加载状态怎么在 React 中用？

培培 Dev 提问于 2026-03-18 14:36:26 阅读 13

组件

我照着 Element Plus 文档想在 React 项目里加个全屏 loading，但完全没效果，页面一点反应都没有。是不是我用法不对？

我试了直接套 ElLoading.service，也试了绑定到某个 DOM 元素上，都不行。控制台也没报错，就是不显示。

import { ElLoading } from 'element-plus'

const handleLoad = () => {
  const loading = ElLoading.service({
    text: '加载中...',
    background: 'rgba(0, 0, 0, 0.7)'
  })
  setTimeout(() => loading.close(), 2000)
}

UI组件主题定制

我来解答赞 3 收藏

反馈

1 条解答

シ永莲 Lv1

兄弟，你这个问题我太有感触了——我之前也踩过这个坑。

直接说吧，Element Plus 是 Vue 3 的组件库，它就不是给 React 用的。你在 React 项目里直接 import ElLoading 当然没效果，它压根不认识 React 的生命周期。

想在 React 里用 Element Plus 的 loading，有几个方案：

方案一：用 React 版的 Element（不是 Element Plus）
这是 Element UI（Vue 2）的 React 版本，叫 element-react。不过这个库维护不太活跃了，不太建议用。

方案二：用社区封装的 React 组件
搜索 element-plus-react 或者 @element-plus/react，有社区做的封装版本能用。

方案三：直接用原生的 loading 逻辑
如果你就想要个全屏 loading，自己写一个也不复杂：

import { createPortal } from 'react-dom';



function FullScreenLoading({ visible, text = '加载中...' }) {

  if (!visible) return null;

  

  return createPortal(

    <div style={{

      position: 'fixed',

      top: 0, left: 0, right: 0, bottom: 0,

      background: 'rgba(0,0,0,0.7)',

      display: 'flex',

      justifyContent: 'center',

      alignItems: 'center',

      color: '#fff',

      zIndex: 9999

    }}>

      {text}

    </div>,

    document.body

  );

}



// 使用

const [loading, setLoading] = useState(false);



const handleLoad = () => {

  setLoading(true);

  setTimeout(() => setLoading(false), 2000);

}



return <FullScreenLoading visible={loading} text="加载中..." />;

我自己项目里都是直接写个 Loading 组件用的，简单省事，也不用额外装 Vue 系的库增加 bundle 大小。

你要是实在想用 Element Plus 的设计风格，可以把它的 CSS 样式扒出来自己用，或者直接换 Ant Design——那才是 React 生态里的主流 UI 库，loading 组件一套就有。

2026-03-18 15:17