前言
在开发 React 组件时，我们通常会添加一些注释来方便使用该组件的开发者理解和使用组件。但是如何将这些注释自动生成为文档呢？这就需要用到一个 npm 包 react-docgen-displayname-handler 。
本篇文章将详细介绍这个 npm 包的使用方法，包括如何安装、使用以及如何在项目中应用。
安装
使用 npm 命令安装 react-docgen-displayname-handler ：
npm install react-docgen-displayname-handler
使用方法
命令行方式
使用命令行的方式生成文档，你只需要在项目的根目录下执行以下命令：
react-docgen -f path/to/displayNameHandler.js path/to/component-directory
其中，path/to/displayNameHandler.js 是用于生成文档的脚本文件，path/to/component-directory 是包含 React 组件的目录。
配置文件方式
如果你需要针对不同的组件设置不同的注释，在路径 path/to/displayNameHandler.js 中实现一个自定义的配置文件 displayNameHandler.js 。
例如，你的 displayNameHandler.js 文件可以包含以下代码：
-- -------------------- ---- -------
-------------- - -
--------- -
-------------- -- ------ -----------
-------- -
---------- ------ ----- --------
-
--
-------- -
-------------- -- ----- -----------
-------- -
-------- ---- ----- -- -- --------- -- --- ------
-
-
--在 path/to/displayNameHandler.js 文件中，你需要导出一个函数，用于获取组件的信息。
-- -------------------- ---- -------
----- ------ - ------------------------
----- ------------------ - --------------------------------
-------- -------------------------- -
----- ------------- - ------------------------------ ----- ----- -
--------- ---------
------------------- ------------------
---
------ --------------
-
-------------- - -----------------使用上述方法可以自定义注释，生成包含自定义信息的文档。
在项目中应用
如果你在使用 create-react-app 创建应用程序，你可以在 package.json 中添加以下代码：
{
"scripts": {
"doc": "react-docgen -f path/to/displayNameHandler.js src/components"
},
"devDependencies": {
"react-docgen-displayname-handler": "^1.1.0"
}
}然后，在命令行输入以下命令，就可以生成文档了：
npm run doc
生成的文档会在项目的 /docs 目录下，以 json 格式存储。
示例代码
-- -------------------- ---- -------
------ ----- ---- --------
------ --------- ---- -------------
----- ------ - -- ---------- -------- -------- -- -- -
------- --------------------- ------------------
----------
---------
--
---------------- - -
---------- -----------------
-------- ---------------
--------- --------------
--
------------------- - -
---------- ---
-------- -- -- --
--
---
- ---------- ------
- ------------ - ------ ---------
- ----- -------- --------- - --- --- --------- -- --- ------
- ----- ---------- ------- - ----- ----- -------
--
------ ------- -------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/59074