将 ReactComponent 存储在对象的 属性 中作为参考

Question

我正在尝试将图标作为 ReactComponents 导入 keystones.ts-

import {ReactComponent as IconUI} from '...'

我正在导出这些图标，以便我可以将它们称为，例如<IconUI> 在另一个文件中。

export {IconUI, IconResponsiveness, ...}

但是在同一个 keystones.ts 文件中，我想存储这些 'icon-components'作为属性在对象里面keystonesData-

export const keystonesData : KeystoneType[] = [
    {
        heading: 'Keystone 1',
        detail: `Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic 
                 or web designs.`,
  /* want to render the icon while mapping keystonesData */
        icon: IconUI
    },
    ...
];

所以简而言之，我想像这样渲染映射函数中的图标-

keystonesData.map(({heading, detail, icon}) => {
  return (
    <icon />
  )
})

问题 是我不能只存储 src 字符串，因为我需要将图标呈现为 ReactComponent。那么有没有办法以某种方式将 reference 存储到这些 'icon-components'?

Answer 1

假设您要导入相同的图标但给它一个临时名称：

import {ReactComponent as IconUIWithoutSrc} from '...'

现在，您构建完整的图标及其 src，并导出带有 src 的图标作为功能组件提供：

const IconUI = () => <IconUIWithoutSrc src="..." />

然后您可以简单地导出已经包含 src 的图标。

export {IconUI, IconResponsiveness, ...}

后来...

keystonesData.map(({heading, detail, Icon}) => {
  return (
    <Icon />
  )
})

这应该可以解决问题。