Vyhledávání na webu

reactjs - Vlastnost 'args' neexistuje na typu (args: Props)

Nemohu pochopit, proč dostávám tuto chybu Property 'args' does not exist on type (args: Props) => Element

Snažím se přidat argumenty ke své komponentě Storybook. Takto vypadá můj soubor .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"
};

A jednoduchý soubor .tsx komponenty Button

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

Jak můžete vidět, mám tam už vlastnost .args v rozhraní Props. Nemám ani ponětí, jak to opravit. Díky :))

Upravit.

Upravil jsem rozhraní

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

Stejně jako objekt PrimaryA

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

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

A stále nic. Nemohu komponentu vidět ve Storybooku

Odpověď č. 1

Musíte použít verzi TypeScript, nyní je to možnost v dokumentaci (https://storybook.js.org/docs/react/get-started/whats-a-story), ale příslušný kód je níže:

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

Odpověď č. 2

Pokud používáte 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'
}

Související články