React Storybook 在 args 中传递函数

Question

我目前正在努力为我的一个组件完成 React 故事中的一个故事：（下图）

\n

我的组件从父组件接收一个 props、一个布尔值和一个修改该布尔值的函数。当我单击按钮时，它应该更改此布尔值的值（从 false 到 true 或从 true 到 false）。\n我似乎无法在故事书上测试此行为。我不知道我是否以正确的方式做事，但似乎不可能将函数从我的 .Stories 文件代码传递到我的组件来测试它。

\n

我的问题是：我是否以正确的方式做事，故事书是为这种测试而编写的吗？

\n

故事文件代码：

\n

import React from 'react';\nimport { ComponentStory, ComponentMeta } from '@storybook/react';\nimport { ModelCard } from './';\n\nexport default {\n  title: 'ModelCard',\n  component: ModelCard,\n  argTypes: {\n    yearProduct: { control : 'text'},\n    ecoDesigned: { control: 'boolean'},\n    titleProduct: {control: 'text'},\n    photoProduct: {control: 'text'},\n    setEcoDesigned: {action: 'clicked'}\n  }\n} as ComponentMeta<typeof ModelCard>;\n\nconst Template: ComponentStory<typeof ModelCard> = (args) => <ModelCard {...args}/>;\nexport const ModelCardCompleteControls = Template.bind({});\nModelCardCompleteControls.args = {\n  yearProduct: '2018',\n  ecoDesigned: false,\n  titleProduct: '66180 - W200 S | 1019507 - ATHLLE Watches or Stopwatche 7026 2021 | GEDS',\n  photoProduct: 'https://picsum.photos/200',\n};\n

\n

我的组件代码：

\n

import React from 'react';\nimport { useState } from 'react';\nimport { VtmnButton, VtmnIcon } from '@vtmn/react';\nimport { EcoDesignedDot } from './EcoDesignedDot';\n\nimport './modelcard.scss';\n\ninterface ModelCardProps {\n    photoProduct: string;\n    yearProduct: string,\n    titleProduct: string,\n    ecoDesigned: boolean;\n    setEcoDesigned: (ecoDesigned: boolean) => void;\n}\n\nexport const ModelCard = ({ yearProduct, titleProduct, photoProduct, ecoDesigned, setEcoDesigned }: ModelCardProps) => {\n  \n  const [open, setOpen] = useState(false);\n  \n  return (\n    <article className="model-card">\n      <section className="vtmn-grid vtmn-grid-cols-12 vtmn-items-center vtmn-space-y-5">\n        <p className="vtmn-col-span-1">{yearProduct}</p>\n        <img className="vtmn-col-span-1"\n          style={{ borderRadius: 5 }}\n          src={photoProduct} width={60}\n          height={60} />\n        <p className="vtmn-col-span-6">{titleProduct}</p>\n        <div className="vtmn-col-span-3">\n          <EcoDesignedDot ecoDesigned={ecoDesigned}/>\n        </div>\n        <div className="vtmn-col-span-1" onClick={() => setOpen(!open)}>\n          <VtmnIcon value="arrow-up-s-line" className={open ? 'reversed_angle' : 'original_angle'} />\n        </div>\n      </section>\n      <section className="vtmn-grid vtmn-grid-cols-12">\n        {\n          open && <div className="vtmn-col-start-3 vtmn-col-span-5">\n            <p>\n              Votre produit est-il \xc3\xa9co-design ?\n            </p>\n            <VtmnButton onClick={() => setEcoDesigned(true)} variant={ecoDesigned ? 'primary' : 'secondary'} size="medium">Oui</VtmnButton> // This is what I'm talking about\n            <VtmnButton onClick={() => setEcoDesigned(false)} variant={ecoDesigned ? 'secondary' : 'primary'} size="medium">Non</VtmnButton> // This is what I'm talking about\n          </div>\n        }\n      </section>\n    </article>\n  );\n};\n

\n

Answer 1

您可以添加useState该Template函数，因为它是一个反应组件，但是请确保将这些值ModelCard正确发送到该组件。

const Template: ComponentStory<typeof ModelCard> = (args) => {

    const [ecoDesigned, setEcoDesigned] = useState(false);

    return <ModelCard {...args} ecoDesigned={ecoDesigned} setEcoDesigned={setEcoDesigned}/>;
};

该args对象将具有所有默认道具。因此，您应该确保这些被覆盖。