Вы, вероятно, читаете это, потому что столкнулись с «готкой» реагирования на попытки динамически ссылаться на имена компонентов с помощью строки шаблона.
Я был там и неустанно искал чистое решение. К счастью, я нашел один, и он отлично работает!
Если вы обнаружили, что используете гигантский оператор Switch Case (например, приведенный ниже код) для рендеринга вашего компонента реакции, вы, вероятно, хотели несколько раз очистить его.
Простой
Почему бы просто не использовать строку шаблона для динамического отображения имени?
Если вы пробовали это, то обнаружили, что
return `${info.moduleName}` просто отображает строку. Что, собственно, и работает, как положено.
Решение
Комбинация React.createElement и Таблица поиска (словарь)
https://reactjs. org/docs/react-api.html#creating-react-elements
Таблица поиска — это (IMO) более чистый способ получения информации для набора данных вместо использования переключателя регистра или оператора if Else.
Вот пример, реализованный в коде
Секрет заключается в возврате
return React.createElement(components[info.module]);
Это создает элемент реакции на основе таблицы поиска, которая была определена выше.
ПРИМЕЧАНИЕ
Это конкретное решение лучше всего подходит для моего варианта использования, поскольку все данные в моих компонентах поступают из вызова API.
Если вы хотите передать определенные данные в свой компонент через свойства, я рекомендую попробовать react-jsx-parser.
