在開發React組件時我們通常需要處理2個問題：

實例化這個組件以便調試

為這個組件編寫使用文檔以便更好的讓別人知道怎么使用這個組件

最原始的方法莫過于開發時建一個頁面用于調試，開發完后再為其手寫文檔。然而一個詳細的React組件文檔應該包括：

為各種使用場景編寫demo以及對應的說明，同時附上demo的源碼

有demo可以當場體驗而不是使用者要自己寫代碼后才能體驗這個組件

它的屬性列表(propTypes)

它的實例方法列表

如果你想做到以上估計得花上你一天的功夫，我希望能把精力放在開發更好的組件上剩下的能毫不費勁的優雅完成，于是我做了本文的主角Redemo。
Redemo是用來簡單優雅的完成以上問題讓你專注于開發自己的組件，剩下的一切它都為你做好了。先看下Redemo為組件生成文檔的效果圖或直接體驗部分實踐中的項目redemo文檔、imuix：

結構如下：

• 最上面是可立即體驗的組件demo，同時可以用在開發過程中調試組件

• 組件實例下是這個demo的說明，支持markdown

• 接下來是組件的屬性列表(propTypes)，支持markdown

• 最后是這個demo的源碼

為你的組件生成這個你幾乎不用寫超過10行簡單的代碼更不用單獨為組件寫文檔。假設你編寫了一個Button組件，讓我們來為Button組件編寫一個demo：

通過npm i redemo 安裝 redemo

寫下這些簡單的代碼

import Redemo from 'redemo'; import Demo from './demo';//為一個使用場景實例化Button組件的demo源碼 // 使用docgen 從 Button 組件源碼里分析出 propTypes const docgen = require('!!docgen-loader!../button'); // 讀取為Button組件編寫的demo的源碼 const code = require('!!raw-loader!../demo'); const doc = `為這個demo做一些說明，支持*markdown*` render( <Redemodocgen={docgen}doc={doc}code={code} ><Demo/> </Redemo> )

聰明的你大概會問以上代碼并沒有為Button屬性編寫文檔，屬性列表里的說明是哪來的？其實是通過react-docgen從Button組件源碼里提取出來的。大家都知道為代碼寫注釋是個好習慣方便維護和理解，而這些注釋正好也可以放在文檔里一舉兩得。所以你在編寫Button組件時需要為propTypes寫注釋，就像這樣：

class Button extends Component {static propTypes = {/*** call after button is clicked，支持*markdown**/onClick: PropTypes.func,}... }

想更深的了解redemo請看這里
希望redemo可以提升你的效率，覺得有用可告訴你的朋友。

閱讀原文

總結

以上是生活随笔為你收集整理的快速优雅的为React组件生成文档的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。