React TS 스토리북: 스토리에서 커스텀 소품 사용하기

React TS Storybook: Appending Custom Props to a Story

아래와 같은 목록 구성 요소가 있다고 가정해 보겠습니다.

import { HTMLAttributes } from "react";

const List = ({ children, ...props }: HTMLAttributes<HTMLUListElement>) => {
  return <ul {...props}>{children}</ul>;
};

const ListItem = ({ children, ...props }: HTMLAttributes<HTMLLIElement>) => {
  return <li {...props}>{children}</li>;
};

List.Item = ListItem;

export default List;

그리고 List.Item를 List의 자식으로 추가하는 방법을 설명하기 위해 itemCountList.Item가 몇 개나 있는지 사용자 지정 소품List을 추가합니다.

import { useMemo } from "react";
import { ComponentStory, ComponentMeta } from "@storybook/react";

import List from "./List";

export default {
  title: "Example/List",
  component: List,
  args: {
    itemCount: 1,
  },
  argTypes: {
    itemCount: { control: "number" },
  },
} as ComponentMeta<typeof List>;

const Template: ComponentStory<typeof List> = ({ itemCount, ...args }) => {
  const liComponents = useMemo(() => {
    const components = [];

    for (let i = 1; i <= itemCount; i++) {
      components.push(<List.Item>{i} Item</List.Item>);
    }

    return components;
  }, [itemCount]);

  return <List {...args}>{liComponents}</List>;
};

export const ListExample = Template.bind({});

사용자 지정 소품을 사용하려고 하면 다음과 같은 오류 메시지가 표시됩니다.Property 'itemCount' does not exist on type '[Component's Props]'. .

이 경우 Meta 및 Story 대신 ComponentMeta 및 ComponentStory를 사용하십시오.

import { ComponentProps, useMemo } from "react";
import { Story, Meta } from "@storybook/react";

import List from "./List";

type CustomListProps = ComponentProps<typeof List> & { itemCount: number };

export default {
  title: "Example/List",
  component: List,
  args: {
    itemCount: 1,
  },
  argTypes: {
    itemCount: { control: "number" },
  },
} as Meta<CustomListProps>;

const Template: Story<CustomListProps> = ({ itemCount, ...args }) => {
  const liComponents = useMemo(() => {
    const components = [];

    for (let i = 1; i <= itemCount; i++) {
      components.push(<List.Item>{i} Item</List.Item>);
    }

    return components;
  }, [itemCount]);

  return <List {...args}>{liComponents}</List>;
};

export const ListExample = Template.bind({});

유니온 연산자로 새로운 커스텀 타입을 정의했고, Meta와 Story를 제네릭 타입으로 사용했습니다.





이제 웹사이트에서 이와 같이 값itemCount을 조정할 수 있습니다.


나는 이것이 누군가에게 도움이되기를 바랍니다 :)

행복한 코딩!