类型上不存在属性“args”（args：道具）

Posted 2023-02-19

【中文标题】类型上不存在属性“args”（args：道具）

【英文标题】：Property 'args' does not exist on type (args: Props)

【发布时间】：2021-07-04 13:12:11

【问题描述】：

我不明白为什么我会收到此错误Property 'args' does not exist on type (args: Props) => Element

我正在尝试将 args 添加到我的 Storybook 组件中。这就是我的.stories.tsx 文件的样子

import React from "react";
import  Story, Meta  from "@storybook/react";

import  Props, Button  from ".";

export default 
  title: "General/Button",
  component: Button
 as Meta;

const Template = (args: Props) => <Button ...args />;

export const PrimaryA = Template.bind();

PrimaryA.args =   <-- ERROR
  variant: "primary"
;

还有简单的.tsxButton组件文件

import  css  from "@emotion/react";
import React from "react";

export interface Props 
   args: 
     variant: string;
    children?: React.ReactNode;
  ,


const style = css`
  .primary 
    background: #0082ff;
    border-radius: 8px;
    width: 150px;
    height: 50px;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;
  
`;

export function Button(props: Props) 
  const  variant = "primary", children = "Primary", ...rest  = props.args;
  return (
    <div css=style className=`button $variant` ...rest>
      children
    </div>
  );

你怎么看我已经在接口Props中有.args属性了。我不知道如何解决它。谢谢:))

编辑。

我编辑了界面

export interface Props 
  variant: string;
  children?: React.ReactNode;

还有PrimaryA对象

const Template = (props: Props) => <Button ...props />;

export const PrimaryA = Template(
  variant: "disabled"
);

还是什么都没有。我在 Storybook 中看不到组件

【问题讨论】：

Args是箭头函数'Template'的参数，不是Element的属性，所以报错是正确的

使用 PrimaryA = Template(args);而是

但是Button作为元素也接收参数Button(props: Props)

按钮接收 args 作为其 props 的属性（在 Props 接口中定义）。这并不意味着 args 是 Button 的属性

还是不行

【参考方案1】：

您需要使用 Typescript 版本，现在是文档中的一个选项（https://storybook.js.org/docs/react/get-started/whats-a-story），但相关代码如下：

import Meta, Story from "@storybook/react";

export default 
  title: "Button",
  component: Button,
 as Meta;

//? We create a “template” of how args map to rendering
const Template: Story<ButtonProps> = (args) => <Button ...args />;

export const Primary = Template.bind();

Primary.args = 
  primary: true,
  label: 'Primary',
;

【参考方案2】：

如果你使用的是 vue3

import Button from '../components/Button.vue'
import  IButtonProps  from '../types/types'
import  Meta, Story  from '@storybook/vue3'

export default 
  title: 'Example/Button',
  component: Button,
  argTypes:
    backgroundColor:  control: 'color' ,
    size: 
      control:  type: 'select', options: ['small', 'medium', 'large'] ,
    ,
    onClick: ,
  ,
 as Meta;


    const Template: Story<IButtonProps>  = (args ) => (
  components:  Button ,
  setup() 
    return  args 
  ,
  template: '<Button v-bind="args" />',
)

export const Primary = Template.bind()
Primary.args = 
  primary: true,
  title: '\u1F9D1\u200D\u1F3A8',
  backgrounColor: 'red'

【讨论】：

虽然此代码可能会回答问题，但提供有关它如何和/或为什么解决问题的额外上下文将提高​​答案的长期价值。