描述bug
在使用React和TypeScript时,当将接口作为函数组件参数提供给组件故事时,会从接口中获取属性。但是在故事文档中看不到接口的所有属性。当你从一个模块导入接口(例如@material-ui)时,你将看不到这些属性。你只能看到在该组件文件中声明的接口的属性。
重现步骤
- 创建一个React函数组件。
- 将接口(可以是导入的模块中的接口,也可以是通过&与之前导入的接口组合的接口)作为该组件的prop类型。
- 为该组件创建一个故事。
- 在故事文档的标签页中,你将看不到导入的属性。
预期行为
我希望在故事文档中看到我导入的接口的属性以及我之前扩展的那个导入接口的接口的属性。
截图
代码片段
Alert/index.tsx
import MuiAlert, {AlertProps as MUIAlertProps} from "@material-ui/lab/Alert";
import {makeStyles} from "@material-ui/core/styles";
function CustomAlert(props) {
return <MuiAlert elevation={6} {...props} />;
}
const useStyles = makeStyles((theme) => ({
root: {
width: "100%",
marginBottom: theme.spacing(2),
"& > * + *": {
marginTop: theme.spacing(2),
},
},
}));
export interface AlertProps extends MUIAlertProps {
message: string;
lol: string;
}
const Alert = ({message, severity, variant, className, ...otherProps}: AlertProps) => {
const classes = useStyles();
return (
<div className={classes.root}>
{/* eslint-disable-next-line react/no-children-prop */}
<CustomAlert
className={className}
severity={severity}
variant={variant}
{...otherProps}
children={message}
/>
</div>
);
};
Alert.defaultProps = {
severity: "success",
message: "Please provide a message",
variant: "filled",
};
export default Alert;
Alert.stories.js
import Alert from "../components/Alert";
export default {
title: "UI Elements/Alert",
component: Alert,
argTypes: {
variant: {
control: {
type: "select",
options: ["filled", "outlined"],
},
},
},
};
const Template: any = (args) => <Alert {...args} />;
export const Success: any = Template.bind({});
系统信息
环境信息:
系统:Windows 10 10.0.19041
CPU:(12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
二进制文件:
Node: 12.18.3 - C:\Program Files
odejs
ode.EXE
Yarn: 1.22.4 - ~\AppData\Roaming
pm\yarn.CMD
npm: 6.14.6 - C:\Program Files
odejs
pm.CMD
浏览器:Chrome 87.0.4280.141;Edge Spartan (44.19041.423.0),Chromium (87.0.664.75)
7条答案
按热度按时间9avjhtql1#
我也注意到了这个问题。对于 Package 其他组件的组件 - 例如,一个 Package 来自npm的组件,为其添加一些额外功能 - 通常会扩展props。以下是使用Ant Design的Col组件进行 Package 的示例:
在Storybook中的props表中,只显示了额外的props。扩展/继承的props没有显示出来。
abithluo2#
I also encountered this problem, I think it is relevant.
Storybook 6.4.0-rc.3
krcsximq3#
你可能可以通过
reactDocgenTypescriptOptions
的propFilter
选项来自定义这个,但是它不是开箱即用的:https://storybook.js.org/docs/react/configure/typescript#mainjs-configurationpes8fvy94#
你能在你的项目中尝试以下的金丝雀,并让我知道它是否解决了你的问题(或者产生了新的问题)吗?我们正在将默认的docgen从
react-docgen-typescript
切换到react-docgen
,这会快得多,也可能修复一些长期存在的bug。非常感谢!注意,目前这个改变只适用于Vite项目。在“如何测试”部分的说明:👉 #23825
luaexgnf5#
我无法访问原始项目,但我尝试在一个新的项目中重现相同的场景,这两个建议似乎都没有改变情况。
irtuqstp6#
@ekremugur17 非常感谢你尝试。你有复制品吗?我很想看看并试着弄清楚发生了什么。
velaa5lx7#
对于任何正在查看此内容的人,这是我在我的
main.ts
文件中添加的内容:这对我有效。