如何使故事书在反应中动态化

Question

weather.stories.ts

export default {
  title: 'Widgets/Forecast',
  component: Weather,
}
const Template: Story<any> = (args) => <Weather {...args} />;

export const Default = Template.bind({});

Default.args = {
    forecast: {
        enable: true,
        bgColor: '#2d4059',
        textColor: '#fff'
    }
    }

forecast.ts

export interface ForecastProps {
    forecast: {
        enable: false,
        bgColor?: string,
        textColor?: string,

   }
}
export default function Weather({ forecast, ...props }: ForecastProps) { .... }

我在这里要做的是将预测启用设置为 true/false。控制故事书中的原因应该是{ enable: true, bgColor: '#2d4059', textColor: '#fff' }

在故事书里应该是这样的。这只是例子：

这是我的输出：

Answer 1

在你的 Forcast 组件中，props 接口不应该有嵌套的 forecast 对象，而应该是这样的：

export interface ForecastProps {
  enable: boolean,
  bgColor?: string,
  textColor?: string,
};

export default function Weather(props: ForecastProps) { .... }

这样 Storybook 就可以将您拥有的不同道具分开。
+ enable 道具类型应该是 boolean 而不是 false.

因此，在您的 .stories 文件中，Default args 不应包含嵌套的 forecast 对象：

Default.args = {
  enable: true,
  bgColor: '#2d4059',
  textColor: '#fff',
};

但是，对于 textColor 和 bgColor 道具，故事控件将被视为一个字符串，而不是您的示例所建议的颜色选择器。

如何使故事书在反应中动态化

How to make the storybook dynamic in react

javascript

typescript

reactjs

storybook