英文:
Storybook controls disapers when wrapping component in HOC
问题
我在storybook中有一个组件,其中有一些控件,并在UI中如下所示
但是当我将组件包装在HOC export default withAlign(Avatar)
中时,它会中断,并且不显示任何控件,并且控件部分被替换为以下文本:找不到此组件的输入。阅读文档
这是我的故事的代码
index.stories.tsx
import { Meta } from '@storybook/react'
import Avatar from '../Avatar'
export { AvatarColor } from './AvatarColor.stories'
export { Default } from './AvatarDefault.stories'
export default {
title: 'Components/Avatar',
component: Avatar,
parameters: {
docs: {
description: {
component: `头像是用户、团队或实体的图形表示。
头像可以显示图像、图标或首字母,并支持各种大小和形状。`,
},
},
},
decorators: [
(Story) => (
<div
style={{
display: 'flex',
gap: '5px',
flexWrap: 'wrap',
}}
>
<Story />
</div>
),
],
} as Meta
AvatarDefault.stories.tsx
import Avatar from '../Avatar'
import { AvatarProps } from '../Avatar.types'
export const Default = (props: Partial<AvatarProps>) => (
<Avatar {...props}>Yooo</Avatar>
)
然后我有我的类型
import { HTMLAttributes } from 'react'
export type AvatarProps = Omit<HTMLAttributes<HTMLElement>, 'color'> & {
/**
* 大小。
*
* @default 50
*/
size?: number
/**
* 属性。
* @default 80
*/
someotherprop?: number
/**
* 颜色。
*
* @default "red"
*/
color?: string
}
你有想法吗,我如何在将组件包装在HOC时显示控件?
英文:
I have a Component in my storybook that have some controls and looks like this in the UI
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
import { Meta } from '@storybook/react'
import Avatar from '../Avatar'
export { AvatarColor } from './AvatarColor.stories'
export { Default } from './AvatarDefault.stories'
export default {
title: 'Components/Avatar',
component: Avatar,
parameters: {
docs: {
description: {
component: `An Avatar is a graphical representation of a user, team, or entity.
Avatar can display an image, icon, or initials, and supports various sizes and shapes.`,
},
},
},
decorators: [
(Story) => (
<div
style={{
display: 'flex',
gap: '5px',
flexWrap: 'wrap',
}}
>
<Story />
</div>
),
],
} as Meta
AvatarDefault.stories.tsx
import Avatar from '../Avatar'
import { AvatarProps } from '../Avatar.types'
export const Default = (props: Partial<AvatarProps>) => (
<Avatar {...props}>Yooo</Avatar>
)
And then I have my type
import { HTMLAttributes } from 'react'
export type AvatarProps = Omit<HTMLAttributes<HTMLElement>, 'color'> & {
/**
* The Size.
*
* @default 50
*/
size?: number
/**
* The prop.
* @default 80
*/
someotherprop?: number
/**
* The color.
*
* @default "red"
*/
color?: string
}
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)
更改为:
const Avatar = withAlign(AvatarComponent)
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
const Avatar = withAlign(AvatarComponent)
export { Avatar }
Solved the issue and The component props and HoC props are displayed in the docs page
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论