在 React 开发中，有时我们需要知道当前渲染的组件的名称，这时候就需要用到 react-display-name 这个 npm 包。本文将详细介绍如何使用 react-display-name 包并掌握它的深度知识，帮助读者更好地开发 React 应用。
安装
安装 react-display-name 很简单，只需要使用 npm 安装即可。在终端中运行以下命令：
npm install react-display-name
用法
在 React 中，我们通常使用 displayName 属性来设置组件的名称。但是，如果没有设置 displayName 属性，那么组件的名称就会变得非常难以追踪，这时候 react-display-name 就可以派上用场了。
使用 react-display-name 的方式非常简单，我们可以将它作为 HOC（高阶组件）来使用，例如：
-- -------------------- ---- -------
------ ----- ---- --------
------ ----------- ---- ---------------------
----- ----------- ------- --------------- -
-------- -
------ ---------- ------------
-
-
------ ------- ----------------------------------------在上面的代码中，我们使用 displayName 包装了 MyComponent 组件，并将其名称设置为 'MyComponent'。现在，无论我们是否设置了 displayName 属性，我们都可以轻松地获取组件的名称。
另一个使用 react-display-name 的例子是在自定义错误界面中打印错误组件的名称。例如：
-- -------------------- ---- -------
------ ----- ---- --------
------ ----------- ---- ---------------------
----- --------- ------- --------------- -
------ ------------------------------- -
------ - --------- ---- --
-
-------- -
-- --------------------- -
------ --------------------------------- --- ----------------
-
------ --------------------
-
-
------ ------- ------------------------------------在上面的代码中，我们使用 displayName 包装了 ErrorPage 组件，并将其名称设置为 'ErrorPage'。在 render 方法中，我们使用 this.props.componentName 获取传递给组件的名称，并将其用于错误界面的渲染。
深度知识
react-display-name 包实际上是一个工厂函数，它接受组件名称作为参数并返回一个 HOC。在返回的 HOC 中，它将原始组件包装在一个新的组件中，并定义 displayName 属性。
function displayName(name) {
return (component) => {
component.displayName = name;
return component;
};
}在上面的代码中，我们定义了 displayName 函数，并将其导出。该函数接受一个名称参数 name，并返回另一个函数，该函数接受一个组件 component，并将其 displayName 属性设置为 name。最后，我们返回组件本身。
指导意义
react-display-name 包并不是必需的，但它可以方便地追踪组件的名称，特别是在开发错误页面等功能时。通过掌握 react-display-name 包的使用方法和深度知识，读者可以更好地掌握 React 应用开发，并在开发过程中轻松地获取组件的名称。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60867