[英]Unable to import components into storybook
I am having trouble getting my first storybook to work.我无法让我的第一本故事书工作。 I am using the latest storybook version and configuration, and ran
npx sb init
to do so, as documented here .我正在使用最新的故事书版本和配置,并运行
npx sb init
来执行此操作,如此处所述。
The following story file will run fine:以下故事文件将运行良好:
SampleComponent.stories.tsx: SampleComponent.stories.tsx:
import React from 'react';
// eslint-disable-next-line import/no-extraneous-dependencies
import { Meta } from '@storybook/react/types-6-0';
// eslint-disable-next-line import/no-extraneous-dependencies
import SampleComponent from './SampleComponent';
export const Foo: React.FC = () => <SampleComponent />;
export default {
title: 'Testing',
component: Foo,
} as Meta;
however, the following storybook does not work and I get an empty storybook instead.但是,下面的故事书不起作用,我得到了一本空的故事书。 I also get the console message:
我还收到控制台消息:
Found a story file for "Testing" but no exported stories.
找到“测试”的故事文件,但没有导出的故事。
SampleComponent.stories.tsx: SampleComponent.stories.tsx:
import React from 'react';
// eslint-disable-next-line import/no-extraneous-dependencies
import { Meta } from '@storybook/react/types-6-0';
// eslint-disable-next-line import/no-extraneous-dependencies
import SampleComponent from './SampleComponent';
export default {
title: 'Testing',
component: SampleComponent,
} as Meta;
Why am I not able to import the SampleComponent
directly into my default export?为什么我无法将
SampleComponent
直接导入我的默认导出?
.storybook/main.js: .storybook/main.js:
module.exports = {
"stories": [
"../src/**/*.stories.@(js|jsx|ts|tsx)"
],
"addons": [
"@storybook/addon-links",
"@storybook/addon-essentials"
]
}
SampleComponent.tsx:示例组件.tsx:
import React from 'react';
const SampleComponent: React.FC = () => <h1>Hello World</h1>;
export default SampleComponent;
file strcuture:文件结构:
src/
- components/
- SampleComponent/
- SampleComponent.tsx
- SampleComponent.stories.tsx
A stories
file should export stories, as named export. stories
文件应导出故事,命名为 export。 Your second example doesn't export any stories.您的第二个示例不导出任何故事。
You can add:你可以加:
export MyStory = () => <SampleComponent/>
or export directory SampleComponent
, but it's probably not a good idea: you will probably use args, parameters and others.或导出目录
SampleComponent
,但这可能不是一个好主意:您可能会使用 args、参数等。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.