Невозможно создать динамические теги JSX из строки

Question

Я пытаюсь вызвать свои реагирующие компоненты с помощью JSX, используя строку вместо прямой записи тега JSX.

Я храню имена тегов в отдельном файле XML, который содержит имя тега и другие сведения.,«Tabs» передается как «ElementTagString» <element> <componentTag>Tabs</componentTag> </element>

addElement = (ElementTagString) => { // ElementTagString = 'Tabs'
 const ElementTag = <ElementTagString/>
 return <ElementTag/> // would be equivilent to writing <Tabs/> directly, calling my component.
}

// tabs component defined elsewhere
export function Tabs(props) {
    return (
        ...
    );
}



```I'm getting the following errpr:
<Tabs /> is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.```

Я пробовал следующие решения безрезультатно:

https://stackoverflow.com/a/33471928/9983270

https://reactkungfu.com/2016/11/dynamic-jsx-tags/

https://reactjs.org/docs/jsx-in-depth.html#html-tags-vs.-react-components

Answer 1

Это невозможно во время выполнения, так как теги JSX <whatever> преобразуются в вызов функции React.createElement.

Смотрите мое решение с полным описанием того, что происходит за сценой, здесь: https://stackoverflow.com/a/55167475/1786034

Answer 2

Вы не можете создавать реагирующие компоненты с JSX, используя строку.То, что вы можете сделать, это сохранить ваши компоненты в объекте, подобном этому:

import Tabs from './tabs';
import PhotoStory from './photo';
import VideoStory from './video';

const components = {
  Tabs: Tabs
  Photo: PhotoStory,
  Video: VideoStory
};

Затем в вашей функции:

addElement = (ElementTagString) => {
 return <components[ElementTagString]  />;
}