故事书可选道具力未定义答案

【问题标题】：Storybook optional props force undefined故事书可选道具力未定义
【发布时间】：2021-05-14 12:52:04
【问题描述】：

我没有找到任何可以解决我问题的答案。我正在用 Typescript 构建一个 React Storybook。使用可选道具，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 ????

【问题讨论】：

when I select undefined。它实际上将值设置为undefined 还是将值设置为"undefined" 的字符串？
未定义，无字符串
尝试使用codesandbox.io发布可重现的演示
我尝试使用 console.log 进行一些调试，它似乎得到了一个字符串。
我有这个确切的问题！打算尝试做一个演示

标签： javascript reactjs typescript storybook

【解决方案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} />
    ) ...

【讨论】：