args 中的 React Storybook 传递函数

Posted 2023-02-19

【中文标题】args 中的 React Storybook 传递函数

【英文标题】：React Storybook passing functions in args

【发布时间】：2021-10-10 15:03:30

【问题描述】：

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

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

我的问题是：我做事的方式是否正确？故事书是否适合这种测试？

故事文件代码：

import React from 'react';
import  ComponentStory, ComponentMeta  from '@storybook/react';
import  ModelCard  from './';

export default 
  title: 'ModelCard',
  component: ModelCard,
  argTypes: 
    yearProduct:  control : 'text',
    ecoDesigned:  control: 'boolean',
    titleProduct: control: 'text',
    photoProduct: control: 'text',
    setEcoDesigned: action: 'clicked'
  
 as ComponentMeta<typeof ModelCard>;

const Template: ComponentStory<typeof ModelCard> = (args) => <ModelCard ...args/>;
export const ModelCardCompleteControls = Template.bind();
ModelCardCompleteControls.args = 
  yearProduct: '2018',
  ecoDesigned: false,
  titleProduct: '66180 - W200 S | 1019507 - ATHLLE Watches or Stopwatche 7026 2021 | GEDS',
  photoProduct: 'https://picsum.photos/200',
;

我的组件代码：

import React from 'react';
import  useState  from 'react';
import  VtmnButton, VtmnIcon  from '@vtmn/react';
import  EcoDesignedDot  from './EcoDesignedDot';

import './modelcard.scss';

interface ModelCardProps 
    photoProduct: string;
    yearProduct: string,
    titleProduct: string,
    ecoDesigned: boolean;
    setEcoDesigned: (ecoDesigned: boolean) => void;


export const ModelCard = ( yearProduct, titleProduct, photoProduct, ecoDesigned, setEcoDesigned : ModelCardProps) => 
  
  const [open, setOpen] = useState(false);
  
  return (
    <article className="model-card">
      <section className="vtmn-grid vtmn-grid-cols-12 vtmn-items-center vtmn-space-y-5">
        <p className="vtmn-col-span-1">yearProduct</p>
        <img className="vtmn-col-span-1"
          style= borderRadius: 5 
          src=photoProduct width=60
          height=60 />
        <p className="vtmn-col-span-6">titleProduct</p>
        <div className="vtmn-col-span-3">
          <EcoDesignedDot ecoDesigned=ecoDesigned/>
        </div>
        <div className="vtmn-col-span-1" onClick=() => setOpen(!open)>
          <VtmnIcon value="arrow-up-s-line" className=open ? 'reversed_angle' : 'original_angle' />
        </div>
      </section>
      <section className="vtmn-grid vtmn-grid-cols-12">
        
          open && <div className="vtmn-col-start-3 vtmn-col-span-5">
            <p>
              Votre produit est-il éco-design ?
            </p>
            <VtmnButton onClick=() => setEcoDesigned(true) variant=ecoDesigned ? 'primary' : 'secondary' size="medium">Oui</VtmnButton> // This is what I'm talking about
            <VtmnButton onClick=() => setEcoDesigned(false) variant=ecoDesigned ? 'secondary' : 'primary' size="medium">Non</VtmnButton> // This is what I'm talking about
          </div>
        
      </section>
    </article>
  );
;

【问题讨论】：

尝试在模板中添加useState 并将它们作为ecoDesigned 和setEcoDesigned 传递。

可以在 stories.tsx 文件中添加 useState 吗？

是的，您可以在 stories.tsx 文件中的 Template 组件中使用 useState 挂钩

我明白你的意思，但我似乎无法让它工作，当我点击我的按钮时，尽管尝试了几次，但什么也没发生：const Template: ComponentStory<typeof ModelCard> = (args) => const [ecoDesigned, setEcoDesigned] = useState(false); return ( <ModelCard ...args/>); ; export const ModelCardCompleteControls = Template.bind(); ModelCardCompleteControls.args = yearProduct: '2018', ecoDesigned: false, titleProduct: '66180 - W200 S | 1019507 - ATHLLE Watches or Stopwatche 7026 2021 | GEDS', photoProduct: 'https://picsum.photos/200', ;

我有你的问题，检查我的asnwer

【参考方案1】：

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

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

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

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

args 对象将具有所有默认属性。所以，你应该确保这些都被覆盖了。

【讨论】：

哇，谢谢你，它就像一个有魅力的人，非常感谢！！