Storybook 控件在将组件包装在高阶组件中时消失

huangapple
go评论106阅读模式
英文:

Storybook controls disapers when wrapping component in HOC

问题

我在storybook中有一个组件，其中有一些控件，并在UI中如下所示
Storybook 控件在将组件包装在高阶组件中时消失

但是当我将组件包装在HOC export default withAlign(Avatar) 中时，它会中断，并且不显示任何控件，并且控件部分被替换为以下文本：找不到此组件的输入。阅读文档

这是我的故事的代码
index.stories.tsx

  1. import { Meta } from '@storybook/react'
  2. import Avatar from '../Avatar'
  3. export { AvatarColor } from './AvatarColor.stories'
  4. export { Default } from './AvatarDefault.stories'
  6. export default {
  7.   title: 'Components/Avatar',
  8.   component: Avatar,
  9.   parameters: {
  10.     docs: {
  11.       description: {
  12.         component: `头像是用户、团队或实体的图形表示。
  13.         头像可以显示图像、图标或首字母，并支持各种大小和形状。`,
  14.       },
  15.     },
  16.   },
  17.   decorators: [
  18.     (Story) => (
  19.       <div
  20.         style={{
  21.           display: 'flex',
  22.           gap: '5px',
  23.           flexWrap: 'wrap',
  24.         }}
  25.       >
  26.         <Story />
  27.       </div>
  28.     ),
  29.   ],
  30. } as Meta

AvatarDefault.stories.tsx

  1. import Avatar from '../Avatar'
  2. import { AvatarProps } from '../Avatar.types'
  4. export const Default = (props: Partial<AvatarProps>) => (
  5.   <Avatar {...props}>Yooo</Avatar>
  6. )

然后我有我的类型

  1. import { HTMLAttributes } from 'react'
  3. export type AvatarProps = Omit<HTMLAttributes<HTMLElement>, 'color'> & {
  4.   /**
  5.    * 大小。
  6.    *
  7.    * @default 50
  8.    */
  9.   size?: number
  10.   /**
  11.    * 属性。
  12.    * @default 80
  13.    */
  14.   someotherprop?: number
  15.   /**
  16.    * 颜色。
  17.    *
  18.    * @default "red"
  19.    */
  20.   color?: string
  21. }

你有想法吗，我如何在将组件包装在HOC时显示控件？

英文:

I have a Component in my storybook that have some controls and looks like this in the UI
Storybook 控件在将组件包装在高阶组件中时消失

But when i wrap my component in a HOC export default withAlign(Avatar) it breaks and does not display any controls, and the controls section is replaces with the following text: No inputs found for this component. Read the docs

Here is my code for the stories
index.stories.tsx

  1. import { Meta } from '@storybook/react'
  2. import Avatar from '../Avatar'
  3. export { AvatarColor } from './AvatarColor.stories'
  4. export { Default } from './AvatarDefault.stories'
  6. export default {
  7.   title: 'Components/Avatar',
  8.   component: Avatar,
  9.   parameters: {
  10.     docs: {
  11.       description: {
  12.         component: `An Avatar is a graphical representation of a user, team, or entity.
  13.         Avatar can display an image, icon, or initials, and supports various sizes and shapes.`,
  14.       },
  15.     },
  16.   },
  17.   decorators: [
  18.     (Story) => (
  19.       <div
  20.         style={{
  21.           display: 'flex',
  22.           gap: '5px',
  23.           flexWrap: 'wrap',
  24.         }}
  25.       >
  26.         <Story />
  27.       </div>
  28.     ),
  29.   ],
  30. } as Meta

AvatarDefault.stories.tsx

  1. import Avatar from '../Avatar'
  2. import { AvatarProps } from '../Avatar.types'
  4. export const Default = (props: Partial<AvatarProps>) => (
  5.   <Avatar {...props}>Yooo</Avatar>
  6. )

And then I have my type

  1. import { HTMLAttributes } from 'react'
  3. export type AvatarProps = Omit<HTMLAttributes<HTMLElement>, 'color'> & {
  4.   /**
  5.    * The Size.
  6.    *
  7.    * @default 50
  8.    */
  9.   size?: number
  10.   /**
  11.    * The prop.
  12.    * @default 80
  13.    */
  14.   someotherprop?: number
  15.   /**
  16.    * The color.
  17.    *
  18.    * @default "red"
  19.    */
  20.   color?: string
  21. }

Any idea how I can display the controls when wrapping my component in a HOC?

答案1

得分: 0

reactDocgen来自@storybook/addon-docs的一部分，属于@storybook/addon-essentials，在默认导出高阶组件（HoCs）时无法工作。

简单地将export default withAlign(Avatar)更改为：

  1. const Avatar = withAlign(AvatarComponent)
  2. export { Avatar }

解决了这个问题，组件属性和高阶组件属性都会显示在文档页面中。

英文:

reactDocgen from @storybook/addon-docs part of @storybook/addon-essentials Does not work with HoCs when you default export them.

Simply changing export default withAlign(Avatar)

To

  1. const Avatar = withAlign(AvatarComponent)
  2. export { Avatar }

Solved the issue and The component props and HoC props are displayed in the docs page

huangapple
  • 本文由 发表于 2023年3月31日 20:26:00
  • 转载请务必保留本文链接：https://go.coder-hub.com/75898505.html
  • javascript
  • reactjs
  • storybook
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定