在 React 项目中，由于组件之间的嵌套使用非常普遍，为了方便调试和排查问题，我们通常需要在每个组件的开头加上一个显示组件名称的注释。这个注释通常是这样的：
-- -------------------- ---- -------
-- ----------
------ ------ - --------- - ---- --------
----- ------- ------- --------- -
-------- -
------ -
-----
--- ---- -- ------- ---
---------- -----------
------
--
-
-
------ ------- --------虽然这个注释很简单，但是如果项目中组件比较多，手动添加注释就会变得非常枯燥和繁琐。幸运的是，我们可以使用一个叫做 babel-plugin-react-display-name 的 npm 包来自动添加这个注释。
安装
安装 babel-plugin-react-display-name 很简单，只需要在项目中运行以下命令即可：
npm install --save-dev babel-plugin-react-display-name
配置
安装完成之后，我们需要在 .babelrc 配置文件中添加一个插件配置来启用这个插件。如果你还没有这个配置文件，可以在项目根目录下创建一个 .babelrc 文件，并加入以下内容：
{
"presets": ["@babel/preset-env", "@babel/preset-react"],
"plugins": ["babel-plugin-react-display-name"]
}使用
配置完成之后，在每个组件的开头添加注释就可以自动添加组件名称了。如果你的组件是使用 class 或者 function 创建的，那么注释应该写在其上方，例如：
-- -------------------- ---- -------
-- ----------
------ ------ - --------- - ---- --------
-- ------------ -------
----- ------- ------- --------- -
-------- -
------ -
-----
---------- -----------
------
--
-
-
------ ------- --------或者：
-- -------------------- ---- -------
-- ------------------
------ ----- ---- --------
-- ------------ ---------------
-------- ----------------- -
------ -
-----
---------- -----------
------
--
-
------ ------- ----------------示例代码
-- -------------------- ---- -------
-- ------
------ ------ - --------- - ---- --------
------ ---- ---- -------------
------ ------------
-- ------------ ---
----- --- ------- --------- -
-------- -
------ -
---- ----------------
------- -----------------------
---- ---------- -------------------- ---------- --
--- ----------------------------- -- ----------
---------
-- ----------------------
-- --- -------- ---- ----------------------- --- ---- -- -------
----
------
--
-
-
------ ------- ------ -------------------- ---- -------
-- -----------
------ ------ - --------- - ---- --------
-- ------------ --------
----- -------- ------- --------- -
-------- -
------ -
------- -----------------------------
------------------
---------
--
-
-
------ ------- ---------总结
使用 babel-plugin-react-display-name 可以方便地自动添加 React 组件名称注释，减少手动添加注释的繁琐过程，提高生产效率。在项目中使用时只需要简单几步配置，就可以在组件中添加注释并进行调试和排错。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedb573b5cbfe1ea061143d