如何解决如何使用Storybook Docs + Typescript扩展HTMLAttributes而不创建巨大的props表?
我们正在使用Storybook 5.3.x构建一个React组件库,并将其转换为Typescript。我们正在使用addon-docs
来显示每个组件的可用道具表。
在创建React组件时,props表是由我们定义props为的任何类型生成的。
const MyComponent = (props: MyComponentProps) => {...}
// Generated props table will show all props in MyComponentProps
但是使用此方法,我们不能使用任何本机HTML属性(例如id
),因为它们没有显式出现在MyComponentProps
或IntrinsicAttributes
上。在常规的React组件中,您可以通过扩展相关的HTMLAttributes
类型
const MyComponent = (props: MyComponentProps & HTMLAttributes<HTMLDivElement>) => {...}
//or
interface MyComponentProps extends HTMLAttributes<HTMLDivElement> {...}
const MyComponent = (props: MyComponentProps) => {...}
但是,通过使用这种模式,在渲染的Storybook文档中,props表记录了每个单独的本机属性,使它长了数百行,并且编译时间呈指数级增长。
我们如何扩展元素的可用属性以包括本机HTML属性,而不创建巨大的属性表?
解决方法
Storybook(6)的最新版本不再这样做。当props扩展HTMLProps时,仅显示该组件特有的props。
,如果必须使用故事书v5,则可以在故事书中添加Webpack自定义配置:
{
loader: 'react-docgen-typescript-loader',options: {
shouldExtractLiteralValuesFromEnum: true,tsconfigPath: path.resolve(__dirname,'../tsconfig.json'),propFilter: function (prop) {
if (prop.parent) {
// removes props that inherits from React or other packages (includes HTMLProps)
return !prop.parent.fileName.includes(
'node_modules'
);
}
return true;
}
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。