reactjs - Typescript 中的 Storybook addon-docs 奇怪行为
问题描述
我想在我的 typescript react 项目中使用 storybook addon-docs。我几乎让它工作了,但文件名似乎正在影响渲染的道具类型表。
文件结构:
src
- Button
-- Button.tsx
- stories
-- Button.stories.tsx
这种作品,但描述是通用的,例如:
union
而不是'small' | 'medium' | 'large'
但是当我将其更改为:
src
- Button
-- Button.stories.tsx
- stories
-- Button.stories.tsx
它完全按预期工作。很奇怪。
我将在下面提供我的文件:
按钮.tsx
import React, { FC, ReactNode } from "react";
type ButtonProps = {
children: ReactNode;
onClick?: () => void;
size?: 'tiny' | 'small' | 'regular';
};
/**
* The world's most _basic_ button
*/
export const Button: FC<ButtonProps> = (props: ButtonProps) => (
<button onClick={props.onClick} type="button">
{props.children}
</button>
);
Button.stories.tsx
import { Button } from '../Button/Button.stories';
import React from 'react';
import { action } from '@storybook/addon-actions';
export default {
title: 'Button',
component: Button,
};
export const Text = () => <Button onClick={action('clicked')}>Hello Button</Button>;
.storybook/main.js
module.exports = {
stories: ["../src/**/*.stories.(ts|tsx|js|jsx|mdx)"],
addons: [
"@storybook/addon-actions",
"@storybook/addon-links",
"@storybook/preset-create-react-app",
{
name: "@storybook/addon-docs",
options: {
configureJSX: true,
},
},
],
};
tsconfig.json
{
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react"
},
"include": [
"src"
]
}
包.json
{
"name": "cra-ts",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.3.2",
"@testing-library/user-event": "^7.1.2",
"@types/jest": "^24.0.0",
"@types/node": "^12.0.0",
"@types/react": "^16.9.0",
"@types/react-dom": "^16.9.0",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.1",
"typescript": "^3.9.5"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"storybook": "start-storybook -p 9009 -s public",
"build-storybook": "build-storybook -s public"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@storybook/addon-actions": "^5.3.19",
"@storybook/addon-docs": "^5.3.19",
"@storybook/addon-info": "^5.3.19",
"@storybook/addon-links": "^5.3.19",
"@storybook/addons": "^5.3.19",
"@storybook/preset-create-react-app": "^3.0.0",
"@storybook/react": "^5.3.19",
"react-docgen-typescript-loader": "^3.7.2",
"ts-loader": "^7.0.5"
}
}
任何帮助,将不胜感激!提前致谢!
解决方案
import React, { FC, ReactNode } from "react";
export type ButtonProps = {
children: ReactNode;
onClick?: () => void;
size?: 'tiny' | 'small' | 'regular';
};
/**
* The world's most _basic_ button
*/
const Button: FC<ButtonProps> = (props: ButtonProps) => (
<button onClick={props.onClick} type="button">
{props.children}
</button>
);
export default Button;
在新行上导出组件有效!
推荐阅读
- python - 在现有的 pandas 数据框中插入一个新列
- gcc - Modelsim,致命:(vsim-3828)无法在 Manjaro Linux 上链接“vsim_auto_compile.so”
- git - 从一个 Git 存储库中提取并推送到另一个
- html - 在jspdf上制作更整洁的表格和样式问题
- css - 背景图像没有响应的问题
- vue.js - Vue.js 3 - 状态管理 - 如何从祖先调用方法
- powershell - 设置 VScode 以调试 pwsh 和 Powershell 脚本
- spring - Spring Cloud 网关路由
- rest - GitHub REST API 中 URL 模板的语法是什么?
- c# - JsonSerializer.Deserialize
(); 在 System.Text.Json 中没有正确反序列化