جاوااسکریپت - «نمیتوان ویژگیهای null را خواند (در حال خواندن 'classList')» در Storybook 7 MDX؟
بهتازگی پروژهام را از استوریبوک ۶.۵ به ۷ بهروزرسانی کردم.
تمام داستانها به خوبی کار میکنند و خودکار مستندات عالی است. حالا من نیاز داشتم یک مستندات سفارشی برای یک کامپوننت دکمه بنویسم، اما وقتی از تگ Story با ویژگی of استفاده میکنم، هنگام باز کردن صفحه مستندات یک خطا دریافت میکنم.
فایل مستندات در مکان درست نمایش داده شده و سپس در صفحه «Doc» از کامپوننت Button قرار میگیرد.
Button.stories.ts
import { Meta, StoryObj } from '@storybook/angular';
import ScButtonComponent from 'xxx/components/base/button/button.component';
const meta: Meta<ScButtonComponent> = {
title: 'Component/Base/Button',
component: ScButtonComponent,
};
export default meta;
type Story = StoryObj<ScButtonComponent>;
export const Primary: Story = {
args: {
level: 'primary',
label: 'Click',
}
}
export const Secondary: Story = {
args: {
level: 'secondary',
label: 'Click',
}
}
export const Tertiary: Story = {
args:{
level: 'tertiary',
label: 'Click',
}
}
export const Icons: Story = {
args: {
level: 'icon',
iconAfter: 'fa-solid fa-question'
}
}
دکمه.mdx
{/* button.mdx */}
import { Canvas, Story, Meta } from '@storybook/blocks';
import * as ButtonStories from './button.stories';
<Meta of={ButtonStories} />
Button
<Story of={ButtonStories.Primary} />
این نتیجه صفحه اسناد من است
پاسخ شماره ۱
بعد از ۲ روز، راه حل را پیدا کردم.
مشکل در preview.ts است، در پارامتر docs یک ویژگی منسوخ شده وجود دارد که روی false تنظیم شده است
docs: {
inlineStories: false,
}
من این خط را در ... تغییر میدهم
docs: {
story: {
inline: false
}
},
و حالا درست کار میکند.
