-
Notifications
You must be signed in to change notification settings - Fork 72
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
如何自动生成 API or Props 文档 #436
Comments
自动生成 React 组件文档方案调研react-docgen 和 react-docgen-typescript 是能解析 react 组件的 Props 描述、类型等等信息:
使用 react-docgen 去解析以下的 tsx 文件内容: import React from 'react';
interface Props {
/**
* I am description
* @default 'aaa'
*
*/
foo: string;
bar: string | number | boolean;
}
/**
* Hi I am CComponent
*/
export function CComponent(props: Props) {
console.log(props);
return (
<div>xxx</div>
)
}
CComponent.defaultProps = {
foo: 'foo',
// bar: 'bar',
} 得到的结果如以下所示:
不过 react-docgen 暂时不支持 JSDoc 的解析:Generate docs for hooks · Issue #332 · reactjs/react-docgen (github.com),但是目前来看能力能满足大部分场景需求了。
参考: 使用方式通过写 <!-- docs/header.md -->
---
title: 我是 Header 组件
---
## 属性
<ReactDocgenAPI path="../src/Header.tsx"></ReactDocgenAPI> 最终渲染生成的 markdown 内容是: ## 属性
| 参数名 | 描述 | 类型 | 默认值 |
| ------ | :--: | :------: | :-----: |
| title | 标题 | `string` | `-` | 两个约定的地方:
|
讨论的结果是,尽量不要把组件文档的逻辑耦合到 新的解决方案是: |
如题
The text was updated successfully, but these errors were encountered: