获取类型字符串不可分配给 Storybook 中 TS 组件的类型字符串

Question

我有一个菜单组件接收单个属性 linkColor 作为字符串来控制图标和文本的 CSS 颜色值。

我刚刚将所有内容都切换到了 TypeScript，除了我的 Storybook 实现之外，一切正常。

我得到的具体错误是：Type '{ linkColor: string; }' is not assignable to type 'string'.ts(2322) 在组件上，尽管 prop 具有内联类型定义。我试过将 prop 作为 arg 传递，将 typeof 定义传递给整个组件，但没有任何效果。

我的菜单组件

const SettingsMenu = (linkColor: string) => {
    const [isOpen, setIsOpen] = useState(false)

    return (
        <div className={`self-start ml-5 pb-2 paragraph-small font-medium ${linkColor}`}>
            <button className="flex items-center" onClick={() => setIsOpen(true)}>
                <Settings className="mr-3" />
                <span className="inline-block">{'Settings'}</span>
            </button>
            <SlideOut title="Settings" menuData={data} isOpen={isOpen} setIsOpen={setIsOpen} />
        </div>
    )
}

export { SettingsMenu }

我的故事书故事

import { SettingsMenu } from '../SettingsMenu'

export default {
    title: 'Settings Menu',
    component: SettingsMenu,
}

export const Primary = () => <SettingsMenu linkColor="text-black" />
// This is the line that's throwing the error

Answer 1

您的组件道具类型无效。

请定义道具类型并按如下方式使用。

interface SettingsMenuProps{
   linkColor: string;
}
const SettingsMenu = ({linkColor}: SettingsMenuProps) => {
....
}

Answer 2

你不能访问 React 组件的值，每个作为 prop 传递的值都在 props 对象中，你要么像 props.linkColor 一样访问它，要么破坏它并定义它的类型，这就是为什么您无法访问 .jsx 或 .tsx

中的 linkColor 值的原因

interface SettingsMenuType {
  linkColor: string;
}

const SettingsMenu: React.FC<SettingsMenuType> = ({linkColor}) => {
    const [isOpen, setIsOpen] = useState(false)

    return (
        <div className={`self-start ml-5 pb-2 paragraph-small font-medium ${linkColor}`}>
            <button className="flex items-center" onClick={() => setIsOpen(true)}>
                <Settings className="mr-3" />
                <span className="inline-block">{'Settings'}</span>
            </button>
            <SlideOut title="Settings" menuData={data} isOpen={isOpen} setIsOpen={setIsOpen} />
        </div>
    )
}

export { SettingsMenu }

获取类型字符串不可分配给 Storybook 中 TS 组件的类型字符串

Getting Type string is not assignable to type string for TS component in Storybook

typescript

reactjs

storybook