reactjs - 如何在 Storybook 中根据 arg 更改传递的参数对象？

Question

我有一个数据对象：

const itemData = {
  name: 'Power Ball'
  liked: [],
  discount: 15.5
}

目前我的 Storybook 代码很简单：

import React from 'react';
import ProductCard from './product-card';
import {itemData} from '../../mocks/item-data';

export default {
  title: 'Shop/Cards',
  component: ProductCard,
};

export const Card = () => <ProductCard product={itemData} />;
Card.storyName = 'Product card';
Card.args = {};

我希望能够根据我的 Storybook 更改数据对象args。我需要在 Storybook 中显示arg liked值true/ false，如果true被选中，那么我需要添加userName到liked数组中。因为discount我想select在 Storybook 中使用具有以下值的菜单：none, 5%, 10%, 25%, 50%. none默认情况下，如果将选择其中任何一个，则数据discount对象中的值需要替换为：

• 无 => 空
• 5% => 5.0
• 10% => 10.0
• 15% => 15.0
• 25% => 25.0
• 50% => 50.0

标签： reactjsstorybook