如何让故事书在 React 中充满活力

编程问答 2022-05-24

问题描述

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,textColor: '#fff' }

在故事书中应该是这样的。 这只是示例：

enter image description here

enter image description here

这是我的输出：

enter image description here

解决方法

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

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

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

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

这样，在您的 .stories 文件中，Default 参数也不应该包含嵌套的 forecast 对象：

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

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

javascriptreactjsreactjsstorybooktypescripttypescript