在 React 开发中，我们通常需要在页面加载时预留一些占位符，告诉用户页面正在加载中，避免用户误以为页面出错。这时，我们可以使用 react-placeholder-component npm 包来实现占位符功能。
介绍
react-placeholder-component 是一个基于 React 的虚拟占位符组件，可以为任何组件添加自定义的占位符。
该组件兼容主流的浏览器，支持多种自定义样式和占位符类型。
安装
使用 npm 安装：
npm install react-placeholder-component
使用方法
在需要添加占位符的组件内，导入 react-placeholder-component。
import React, { Component } from 'react';
import Placeholder from 'react-placeholder-component';在 render 函数里，将需要添加占位符的组件作为 Placeholder 的子组件，并设置 Placeholder 的属性：
-- -------------------- ---- -------
-------- -
------ -
------------
---------------------------
--------------------
-----------------------------------------------
-----------------------
---
-
-------------- --
--------------
--
-ready：是否准备好展现组件内容。如果是 false，则展现占位符；如果是 true，则展现组件内容。showLoadingAnimation：是否显示加载动画。如果是 false，则只展现静态占位符；如果是 true，则展现带有加载动画的占位符。customPlaceholder：自定义占位符。该属性的值可以是一个字符串或一个 React 组件。placeholderType：占位符类型。该属性的取值包括 media（多媒体）、text（文本）、textRow（文本行）等。
在组件加载完成后，将 loading 状态改为 true 即可：
componentDidMount() {
this.setState({loading: true});
}示例
假设我们要在页面加载时为一张图片添加占位符：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ ----------- ---- ------------------------------
------ ------- ---- ------------
----- ----------- ------- --------- -
----- - -
-------- -----
-
------------------- -
----------------------- -------
-
-------------------- - -- -- -
------ -
---- -------- -------- ------ ---
---- -------- ----- - ---
---- -------- ------ --- ------- --- ------- ------- ---------------- ------ ---------
------
------
--
-
-------- -
------ -
------------
---------------------------
--------------------
-----------------------------------------------
-----------------------
-
-------- --
--------------
--
-
-
------ ------- ------------其中，MyImage 组件和 getCustomPlaceholder 函数的实现如下：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
----- ------- ------- --------- -
-------- -
------ -
---- ------------------------------ ------- ------ --
--
-
-
------ ------- ---------- -------------------- ---- -------
-------------------- - -- -- -
------ -
---- -------- -------- ------ ---
---- -------- ----- - ---
---- -------- ------ --- ------- --- ------- ------- ---------------- ------ ---------
------
------
--
-当组件加载完成后，页面将显示图片；否则，将显示一个大小为 60x60、底色为灰色的占位符。
总结
使用 react-placeholder-component 可以为页面的组件添加占位符功能，有效提升用户体验。通过自定义占位符和占位符类型，可以实现多种样式和效果，满足不同的需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055fe381e8991b448dd7fa