属性 'args' 类型不存在（参数：道具）

Question

我不明白为什么会收到此错误消息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"
};

以及 Button 组件的简单 .tsx 文件

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>
  );
}

怎么看我的界面道具里已经有.args属性了。我不知道如何解决它。谢谢:))

编辑。

我编辑了界面

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

以及PrimaryA对象

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

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

仍然一无所获。我在 Storybook 中看不到组件

Answer 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',
};

Answer 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: '\u{1F9D1}\u{200D}\u{1F3A8}',
  backgrounColor: 'red'
}

属性 'args' 类型不存在（参数：道具）

Property 'args' does not exist on type (args: Props)

typescript

reactjs

storybook