reactjs - 让 Storybook react-docgen-typescript-loader 使用 typescript 道具
问题描述
我正在尝试使用react-docgen-typescript-loader
我的 TypeScript Props 在 Storybook 中生成我的道具文档,但它没有将任何内容填充到withInfo
插件中。
我正在使用 create-react-app 的 TypeScript 风格,并且我正在遵循多种不同的配置方法,.storybook/webpack.config.js
但似乎没有任何效果。
这是我当前的配置:
.storybook/webpack.config.js
module.exports = ({ config, mode }) => {
config.module.rules.push({
test: /\.(ts|tsx)$/,
use: [
{
loader: require.resolve('babel-loader'),
options: {
presets: [['react-app', { flow: false, typescript: true }]],
}
},
require.resolve("react-docgen-typescript-loader"),
]
});
config.resolve.extensions.push('.ts', '.tsx');
return config;
};
.storybook/config.ts
import { configure } from '@storybook/react';
// automatically import all files ending in *.stories.js
const req = require.context('../', true, /.stories.tsx$/);
function loadStories() {
req.keys().forEach(filename => req(filename));
}
configure(loadStories, module);
故事/button.stories.tsx
import * as React from 'react';
import { storiesOf } from '@storybook/react';
import { withInfo } from '@storybook/addon-info';
import Button from '../src/components/Button';
storiesOf('Button', module)
.addDecorator(withInfo)
.add('continue', () => <Button buttonType="submit">Hello Button</Button>, { info: { inline: true } })
.add('back', () => <Button buttonType="reset">Hello Button</Button>, { info: { inline: true } });
src/components/Button.tsx
import React from 'react';
interface Props {
buttonType: Button.Type;
}
const Button: React.FunctionComponent<Props> = (props) => {
const getStyles = (buttonType: string): {color: string} => {
if (buttonType === 'reset') {
return { color: 'red' };
}
if (buttonType === 'submit') {
return { color: 'green' };
}
return { color: 'green' };
};
const { buttonType, children } = props;
return <button type={buttonType} style={getStyles(buttonType)}>{children}</button>;
};
export default Button;
解决方案
使用命名导入有一些区别,这对我有用:
import React, {FC} from 'react'
...
const Button: FC<Props> = (props) => {
推荐阅读
- python - 比较两个不同的 python 计数器对象
- web-services - 具有基本身份验证的 wsimport 不允许在用户名或密码中使用 @
- c# - 如何将 CTRL+S 发送到 MS Word?
- java - 在 Weblogic 12c 上构建 EAR 和部署
- python - 如果一个数字与另一个数字太相似,我如何设置一个循环以便它生成一个新的随机数?
- python - 在python中添加字符串(作为base 12数字的表示)和整数/其他字符串
- amazon-s3 - Rails ActiveStorage 附加到现有 S3 文件
- javascript - 为什么在 jquery 中所有的文本字段都可以连接到 Javascript 文件但只有一个被遗漏了?
- javascript - SAPUI5 addEventListener 在加载时调用函数而不是在声明的事件上
- javascript - 如何绑定事件处理函数,使其能够成功设置 React 状态?