javascript - Storybook 可选 Prop force undefined

Question

我没有找到任何解决我问题的答案。我正在使用 Typescript 构建 React Storybook。通过可选 Prop ，Storybook 插件添加了一个“未定义”选项。我放了一个 defaultProps 但它不接受它。你有什么解决办法吗？

组件:

type IconType = 'outline' | 'solid'

export interface IconProps {
  name: keyof typeof icons
  size?: number
  type?: IconType
  className?: string
  fallback?:
    | boolean
    | React.ReactChild
    | React.ReactFragment
    | React.ReactPortal
    | null
}

const Icon = ({
  name,
  type = 'solid',
  className = '',
  size = 4,
  fallback = null,
}: IconProps): JSX.Element => {
  if (!name) {
    throw new Error("Can't call Icon component without name props")
  }

  const Icon = React.lazy(
    () => import(`../${type}/${icons[name]}`)
  )

  return (
    <React.Suspense fallback={fallback}>
      <Icon className={className} style={{width: size, height: size}} />
    </React.Suspense>
  )
}

Icon.defaultProps = {
  type: 'solid',
}

export default Icon

故事:

import React from 'react'
import { Story, Meta } from '@storybook/react'
import Icon, { IconProps } from '.'

export default {
  title: 'Components/Icon',
  component: Icon,
} as Meta

const Template: Story<IconProps> = (args) => <Icon {...args} />

export const Basic = Template.bind({})
Basic.args = {
  name: 'plus',
}

它告诉我:

当我选择 undefined 时，它不会使用 Icon 的 defaultProps 😭

Answer 1

我遇到了同样的问题，对我来说它工作正常:

import React from 'react'
import { ComponentStory, ComponentMeta } from '@storybook/react'
import Icon, { IconProps } from '.'

export default {
  title: 'Components/Icon',
  component: Icon,
} as ComponentMeta<typeof Icon>

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

export const Basic = Template.bind({})
export const BasicArgs: IconProps = {
  name: 'plus',
}
Basic.args = BasicArgs

此外，当我尝试导出故事并在其他地方使用它时，它不起作用，因为类型不匹配:我能够通过创建一个名为 BasicArgs 的附加类型对象来解决它在两者之间，然后根据您的情况将其分配给 Basic.args。

现在您可以将它导入其他地方并像那样使用它:

import { Basic, BasicArgs } from './Icon.stories'
    
...  (
       <Basic {...BasicArgs} />
    ) ...