Я пытаюсь создать пользовательский набор иконок, определенный из таблицы стилей CSS, но он выдает ошибку « Предупреждение: React.createElement: тип недопустим — ожидается строка (для встроенных компонентов) или класс / функция (для составного компоненты), но получил:. Вы случайно экспортировали литерал JSX вместо компонента? «Я не знаю почему.

В myIcon.jsx я создал компонент myIcon который отображает пользовательский значок в форме jsx. myIconsMap создает карту объектов, где каждый ключ является именем значка, а его значение — компонентом React (сделанным из myIcon ).

 //myIcon.jsx import React from 'react'; import 'styles/fonts/customIcons.css'; const myIcons = ['randomIcon1', 'randomIcon2']; const myIcon = props ={amp}gt; { return {amp}lt;div className={`icon-${props.name}`} /{amp}gt;; }; const myIconsMap = myIcons.reduce((icons, iconName) ={amp}gt; { icons[iconName] = {amp}lt;myIcon name={iconName} /{amp}gt;; return icons; }, {}); const randomIcon1 = myIconsMap.randomIcon1; const randomIcon2 = myIconsMap.randomIcon2; export {randomIcon1, randomIcon2}; 

Но randomIcon1 и randomIcon2 оба возвращают typeof объекта, и я запутался почему, потому что они оба ссылаются на компонент React (то есть `). Я думаю, что это проблема; Мне нужно, чтобы это была функция typeof вместо объекта, прежде чем браузер сможет правильно ее отобразить.

После этого я экспортирую свои иконки из myIcon.jsx в allIcons.jsx. Этот файл отображает значки в браузере:

 //allIcons.jsx import {randomIcon1, randomIcon2} from './myIcon'; export const icons = { randomIcon1, randomIcon2 } const Icon = (name) ={amp}gt; { const IconComponent = icons[`${name.substring(0, 1).toUpperCase()}${name.substring(1)}`]; return {amp}lt;IconComponent /{amp}gt;; }; 

У кого-нибудь есть идеи, почему это происходит?

123star45

новый участник этого сайта. Будьте внимательны, спрашивая разъяснения, комментируя и отвечая. Проверьте наш

Правила поведения

,

 icons[iconName] = {amp}lt;myIcon name={iconName} /{amp}gt;; 

Эта строка не создает новый компонент. Он рендерит существующий компонент, создавая реактивный элемент. Этот элемент является описанием того, что нужно поместить на страницу, и выглядит примерно так:

 { $$typeof: Symbol(react.element), type: MyIcon, key: null, ref: null, props: { name: iconName } } 

Это можно использовать для размещения материалов на странице, но не с тегом JSX, например {amp}lt;IconComponent /{amp}gt; . Это попыталось бы воспроизвести это снова, что не может произойти, так как это уже было оказано. Чтобы использовать этот элемент, вам нужно сделать:

 const Icon = (name) ={amp}gt; { const iconElement = icons[`${name.substring(0, 1).toUpperCase()}${name.substring(1)}`]; return iconElement; } 

Другой подход (и тот, который я бы порекомендовал) заключается в создании отдельных компонентов для каждой иконки. Для этого вам просто нужно обернуть существующий код в функцию, превратив его в компонент.

 icons[iconName] = () ={amp}gt; {amp}lt;myIcon name={iconName} /{amp}gt;;