javascript - ไม่สามารถนำเข้าคอมโพเนนต์ไปยังสตอรีบุ๊กได้

ฉันกำลังประสบปัญหาในการทำให้หนังสือเรื่องราวเล่มแรกของฉันทำงานได้ ฉันกำลังใช้เวอร์ชันและการกำหนดค่าล่าสุดของ Storybook และรัน npx sb init เพื่อทำตามเอกสารที่นี่

ไฟล์เรื่องราวต่อไปนี้จะทำงานได้ดี:

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;

อย่างไรก็ตาม หนังสือนิทานต่อไปนี้ใช้การไม่ได้และฉันได้รับหนังสือนิทานว่างแทน ฉันยังได้รับข้อความในคอนโซลว่า:

พบไฟล์เรื่องราวสำหรับ "Testing" แต่ไม่มีเรื่องราวที่ถูกส่งออก

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;

ทำไมฉันจึงไม่สามารถนำเข้า SampleComponent โดยตรงไปยังค่าเริ่มต้นที่ส่งออกของฉันได้?

.storybook/main.js:

module.exports = {
  "stories": [
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials"
  ]
}

SampleComponent.tsx:

import React from 'react';

const SampleComponent: React.FC = () => <h1>Hello World</h1>;

export default SampleComponent;

โครงสร้างไฟล์:

src/
  - components/
    - SampleComponent/
      - SampleComponent.tsx
      - SampleComponent.stories.tsx

คำตอบ #1

ไฟล์ stories ควรส่งออก stories เป็นการส่งออกแบบตั้งชื่อ ตัวอย่างที่สองของคุณไม่ได้ส่งออก stories ใดๆ

คุณสามารถเพิ่มได้ :

export MyStory = () => <SampleComponent/>

หรือไดเรกทอรีส่งออก SampleComponent แต่คงไม่ใช่ความคิดที่ดี: คุณน่าจะใช้ args, parameters และอื่น ๆ