網站搜尋

reactjs - 使用 children 作為參數時 Storybook 類型錯誤


我正在嘗試在 args 中使用 TS 和 storybook 的 children,https://storybook.js.org/docs/react/writing-stories/stories-for-multiple-components#using-children-as-an-arg

我有一個 Button.stories.tsx:

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

import { Button } from "./Button"

export default {
    title: "Example/Button",
    component: Button,
    argTypes: {
        backgroundColor: { control: "color" },
    },
} as ComponentMeta<typeof Button>

const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />

export const Primary = Template.bind({})
Primary.args = {
    primary: true,
    label: "Button",
}

以及 ButtonGroup.stories.tsx:

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

import { ButtonGroup } from "./ButtonGroup"

import { Primary } from "../Button/Button.stories"

export default {
    title: "Example/ButtonGroup",
    component: ButtonGroup,
    argTypes: {},
}

const Template: ComponentStory<typeof ButtonGroup> = (args) => <ButtonGroup {...args} />

export const PrimaryButtonGroup = Template.bind({})
PrimaryButtonGroup.args = {
    children: (
        <>
            <Primary {...Primary.args} />
            <Primary {...Primary.args} />
        </>
    ),
}

<Primary {...Primary.args} /> 在 PrimaryButtonGroup.args 上有一個類型錯誤。問題在於 args 是可選的,所以來自 Primary.args 的 primary 和 label 可能是 undefined。因此,它無法匹配 label 的類型 string。

我該如何解決這個問題?