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

tf7tbtn2 于 2022-12-24 发布在 TypeScript

关注(0)|答案(2)|浏览(160)

我有一个菜单组件，它接收单个prop 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

typescript

来源：https://stackoverflow.com/questions/71770110/getting-type-string-is-not-assignable-to-type-string-for-ts-component-in-storybo

2条答案

按热度按时间

xoefb8l81#

你不能访问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 }

赞(0）回复(0）举报 2022-12-24

eqzww0vc2#

您的组件 prop 类型无效。
请定义 prop 类型并按如下方式使用。

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

赞(0）回复(0）举报 2022-12-24

我来回答

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

2条答案

相关问题

热门标签

最新问答