如何使用Storybook Docs + Typescript扩展HTMLAttributes而不创建巨大的props表？

编程问答 2022-09-30

问题描述

我们正在使用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属性，而不创建巨大的属性表？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

reactjsreactjsstorybooktypescripttypescript