Reactjs 将组件存储在对象中'；s属性作为引用

我正在尝试将图标作为组件导入keystone.ts-

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

export {IconUI, IconResponsiveness, ...}

但是在同一个keystones.ts文件中，我想将这些“图标组件”作为属性存储在

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 />
  )
})

keystnesdata.map（{标题，细节，图标}）=>{
返回(
)
})

---

问题是我不能只存储

src

字符串，因为我需要将图标呈现为

ReactComponent

。那么，有没有办法以某种方式存储对这些“图标组件”的引用呢？

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

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

现在，您构建完整图标及其src，并将图标及其src作为功能组件导出：

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

后来

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

keystnesdata.map（{标题，细节，图标}）=>{
返回(
)
})

这应该能奏效

export {IconUI, IconResponsiveness, ...}

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