简介
@rosskevin/react-docgen 是一款用于自动生成 React 组件文档的插件。它可以方便地解析 React 组件中的 props、方法、事件等相关信息，生成易于阅读的文档页面，可以大大提升 React 组件开发的效率。
安装
使用 npm 安装 @rosskevin/react-docgen：
npm install @rosskevin/react-docgen --save-dev
同时还需要安装 React 相关的依赖：
npm install react react-dom prop-types --save
使用方法
1. 添加配置
在项目根目录下新建 .reactdocgenrc.json 配置文件，用于配置文档生成的相关参数，如下所示：
-- -------------------- ---- -------
-
------------- -------------------------
-------------- ---------------
----------- --------------------
-------------------- -
--------
-----------
--
---------------------- ----
-其中：
components：指定需要生成文档的组件文件路径；propsParser：指定解析注释的工具，默认为babylon；template：指定生成文档的模板文件；skipPropsWithName：指定忽略的 prop 名称，如style、className；skipPropsWithoutDoc：是否忽略未添加注释的 prop。
2. 编写组件
在组件文件中添加注释，用于描述组件的 props、methods、events 等内容：
-- -------------------- ---- -------
------ ----- ---- --------
------ --------- ---- -------------
---
- ------ --
-
- ------ -------- ---- - ----
- ------ -------- ---- - ----
- ------ ---------- ------- - -----------
-
- --------
- ------- --------- -------------- ----------- -- ------------- ---------- --
--
----- ------ - -- ----- ----- ------- -- -- -
------- ------------------------- ------------------
------
---------
--
---------------- - -
----- ----------------------------
----- --------------------------- ------------
-------- --------------------------
--
------ ------- -------3. 生成文档
在终端中执行以下命令即可生成文档：
npx react-docgen src/components/button.js -o docs/button.md
其中，src/components/button.js 是组件文件路径，docs/button.md 是生成的文档文件路径。
4. 展示文档
使用 markdown 工具将生成的文档进行渲染，如使用 markdown-it：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ ---------- ---- -------------- ------ ------ ---- ---------------------- ----- -- - --- ------------- ----- --- - -- -- - ----- -------- - ---------------------------- ------ ---- -------------------------- ------- --------------------------- -- --- -- ------ ------- ----
其中，dangerouslySetInnerHTML 用于防止 XSS 攻击问题。
总结
@rosskevin/react-docgen 是一款非常实用的工具，它可以快速生成易于阅读的组件文档，提高开发效率。在编写组件时添加注释，可以更加清晰地描述组件的 props、methods、events 等内容，有助于团队协作和代码维护。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005672681e8991b448e3a2e