Skip to content
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

docs(react-docgen): add some limit and more info #5409

Merged
merged 1 commit into from
Feb 20, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -245,7 +245,20 @@ export const Button = (props?: ButtonProps) => {};
```

The above is a standard writeup where `ButtonProps` will be extracted into the table and `Button` will be the title of the table.
If you use the default export, the filename will be used as the form title. The generated content is as follows:
If you use the default export, the filename will be used as the form title.

Notice that export features declared elsewhere are not available.

```tsx
const A = () => {};

export { A }; // wrong
export default A; // wrong
export const B = () => {}; // right
export default () => {}; // right
```

The generated content is as follows:

```mdx
### ButtonTest
Expand All @@ -267,6 +280,12 @@ If React types are used in Props, you need to add the types in tsconfig.json, ot
}
```

The best way is that you import the type directly:

```tsx
import { FC } from 'react';
```

:::

- `documentation` is used in tool library scenarios to parse JSDoc annotations.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -239,8 +239,20 @@ export type ButtonProps = {
export const Button = (props?: ButtonProps) => {};
```

上面是一个标准写法,其中 `ButtonProps` 将被提取至表格中, `Button` 作为表格的标题。
如果使用默认导出,文件名将作为表格标题。生成的内容如下:
上面是一个标准写法,其中 `ButtonProps` 将被提取至表格中, `Button` 作为表格的标题。如果使用默认导出,文件名将作为表格标题。

需要注意的是,export 导出事先定义的特性将不会被解析。

```tsx
const A = () => {};

export { A }; // wrong
export default A; // wrong
export const B = () => {}; // right
export default () => {}; // right
```

生成的内容如下:

```mdx
### ButtonTest
Expand All @@ -262,6 +274,12 @@ export const Button = (props?: ButtonProps) => {};
}
```

更好的方式是直接引用类型,例如

```tsx
import { FC } from 'react';
```

:::

- `documentation`适用于工具库场景,用来解析 JSDoc 注释。
Expand Down
Loading