在 React 的组件开发中，我们经常使用 ES6 的 class 语法来构建类组件。但是一个问题是，当我们在开发过程中使用自定义的 HOC（高阶组件）时，可能会发现在开发工具的调试器中看到的组件名称并不是我们期望的结果。
这时候，我们需要使用 babel-plugin-react-class-display-name 这个 npm 包来解决这个问题。
安装
首先，在你的项目中安装该插件：
npm install babel-plugin-react-class-display-name --save-dev
然后，在你的 babel 配置文件中加入该插件：
module.exports = {
plugins: [
["babel-plugin-react-class-display-name", {
"displayName": true
}]
]
}配置项
该插件有一个配置项 displayName，该配置项的默认值为 false。当将该配置项设置为 true 时，调试工具会显示我们期望的组件名称。
示例代码
下面是一个示例代码，该代码使用了一个自定义的 HOC，并使用了该插件来定制组件名称：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
----- ----- - ------------------ -- -
------ ----- ------- --------- -
-------- -
------ ----------------- --------------- ---
-
--
--
------
----- ----------- ------- --------- -
-------- -
------ -
-----
-- ---------
------
--
-
-
------ ------- ------------在以上代码中，我们可以在调试工具中看到 MyComponent 组件的名称，而不是 WrappedComponent。如果没有使用该插件，我们将无法直接在调试工具中看到正确的组件名称。
结语
babel-plugin-react-class-display-name 插件可谓是非常实用的 React 插件。通过使用该插件，我们可以定制我们期望的组件名称，并且可以更好的进行调试和排查问题。
同时，该插件的使用也非常简单，只需要按照上述方法进行配置即可。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/62645