在开发前端应用程序时，文档和注释是极其重要的工具。文档和注释可以帮助你更快速地理解代码，更好地协作和维护项目，同时也可以提高代码的可读性和可维护性。在 React 中，组件文档和注释也很重要。
为了方便生成 React 组件的文档和注释，在 NPM 上发布了一个名为 @umayr/react-docgen 的包。它是一个针对 React 代码的文档生成器，可以从你的 React 组件中提取信息，生成 API 和 Props 文档。接下来，我们将为您介绍这个包，并提供一些简单的示例代码。
安装
@umayr/react-docgen 不依赖于其他任何设置，所以可以通过以下命令轻松安装：
npm install @umayr/react-docgen --save-dev
使用
可以在任何 Node.js 项目或 React 应用程序中使用 @umayr/react-docgen，然后将其包含在你的构建过程中。但是，在这个教程中，我们将使用一个静态页面作为示例。
要开始生成文档，可以使用以下代码：
-- -------------------- ---- -------
------ ----- ---- -------
------ --------- ---- ------------
---
- - ------ ---------
--
----- ------ ------- --------------- -
------ --------- - -
--- ---- -- ------- ------ --- ------ --
----- ----------------------------
--- ------- -- --- --- ------ -- -------- --
--------- ---------------
--- -------- -------- -- -- ------ ---- --- ------ -- ------- --
-------- --------------
-
------ ------------ - -
----- ------ ----
--------- ------
-------- ---------- --
-
-------- -
----- - ----- --------- ------- - - ----------
------ -
-------
-----------------
-------------------
-------- ---------------- ------ ------ ------ --
-
------
---------
-
-
-
---------------- - -
----- ----------------------------
--------- ---------------
-------- --------------
-
------------------- - -
----- ------ ----
--------- ------
-------- ---------- --
-
------ ------- ------它是一个非常简单的 Button 组件，其中包含一些 Props 和默认值，它们都有注释。接下来，我们将使用 @umayr/react-docgen 从 Button 中生成文档。
-- -------------------- ---- -------
------ --------- ---- ------------
------ ------ ---- ---------------------
---
- --------- - -------- ------ ------------- --- - ----- ---------
- ------ ------------------------------------ --------- - --- --------- -- -------- ------------- ---
- ------ ---------------------------------------- -------------- - --- ------- -- -- ------ -- -----
- -------- --------
--
-------- --------------------------------- ------------ - --- -
----- ---- - ----------------------- -------------
------ -
-- ---------------------
---
---------------- -- ---
-------------------------
--
------------
-
-------- ---------------- -
-- -------- ------ --
----- ---- - ------------------
-- ------------ --- -- ------ --
----- ------- - -------- ------- ----------- ---------- --------------
----- ---- - ----
----------- -- --------------------------------------------
--------- -- -- ---------------- - --------------- - -- - ---
-------- -- -
----- - ----- --------- ------------- ----------- - - ----------
------ -
-------------
-------------------
-------- - ----- - ---
--- - ------------- - ------------------ - --- - ----
----------- -- --
-
--
------ -
---
--- -------
---
------------ ---------------- -- -- ------------ - --- ----
--
-
-
------ ------- ----------------------上面这段代码定义了一个名为 componentDocumentation 的函数，它将实际的组件作为参数，并返回一个字符串，其中包含组件的文档，包括 API 和 Props。我们来看一下这个函数的工作原理。
函数中首先导入了 @umayr/react-docgen 和 PropTypes。接下来，它定义了一个名为 componentDocumentation 的函数，并将其导出。
-- -------------------- ---- -------
-------- --------------------------------- ------------ - --- -
----- ---- - ----------------------- -------------
------ -
-- ---------------------
---
---------------- -- ---
-------------------------
--
------------
-该函数采用两个参数：一个 React 组件和一个 babel 配置。这个函数返回一个字符串，该字符串具有以下类型：
-- -------------------- ---- ------- - ------- ---- ----------- -- ----- - ---- - ---- - -------- - ------- - ----------- - - ---- - ---- - -------- - ------- - ----------- - - ---- - ---- - ------ - ------- - ----------- -
该字符串包含组件的文档，包括显示名称、说明和 Props 列表。
-- -------------------- ---- -------
-------- ---------------- -
-- -------- ------ --
----- ---- - ------------------
-- ------------ --- -- ------ --
----- ------- - -------- ------- ----------- ---------- --------------
----- ---- - ----
----------- -- --------------------------------------------
--------- -- -- ---------------- - --------------- - -- - ---
-------- -- -
----- - ----- --------- ------------- ----------- - - ----------
------ -
-------------
-------------------
-------- - ----- - ---
--- - ------------- - ------------------ - --- - ----
----------- -- --
-
--
------ -
---
--- -------
---
------------ ---------------- -- -- ------------ - --- ----
--
-
-该函数采用一个名为 props 的以对象，该对象代表组件的 Props。对于每个属性，我们采用一行表格，每个单元格在竖线之间。表格包括以下五个类别：名称、类型、是否为必需、默认值和说明。这个函数也是要被拼接进之前的函数返回的字符串里的，并返回一个数组表示表格里的各个行。
结论
使用 @umayr/react-docgen 包生成你的 React 组件的文档和注释，能够让你更轻松地创建文档、注释，提高代码的可读性和可维护性。在本教程中，我们介绍了如何使用 @umayr/react-docgen，并展示了一些示例代码。你现在可以使用 @umayr/react-docgen 制作 React 组件的文档啦！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005527381e8991b448cff2e