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。
我該如何解決這個問題?