Блог

Я пытаюсь импортировать значки как ReactComponents в keystones.ts—

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

Я экспортирую эти значки, чтобы я мог вызывать их как, например <IconUI> , в другом файле.

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

Проблема в том, что я не могу просто сохранить src строку, потому что мне нужно отобразить значки как ReactComponent . Итак, есть ли какой-нибудь способ каким-то образом сохранить ссылку на эти «компоненты значков»?

Допустим, вы импортируете тот же значок, но присваиваете ему временное имя:

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

Теперь вы создаете полный значок с его src и экспортируете значок с src, предоставляемым в качестве функционального компонента:

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

А затем вы можете просто экспортировать значок, пока он уже содержит src .

 export {IconUI, IconResponsiveness, ...}
 

И позже…

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

Это должно сработать.