React / JSX имя динамического компонента

Я пытаюсь динамически визуализировать компоненты в зависимости от их типа.

Например:

var type = "Example";
var ComponentName = type + "Component";
return <ComponentName />; 
// Returns <examplecomponent />  instead of <ExampleComponent />

Я попробовал решение, предложенное здесьReact / JSX динамические имена компонентов

Это дало мне ошибку при компиляции (используя browserify для gulp). Это ожидало XML, где я использовал синтаксис массива.

Я мог бы решить эту проблему, создав метод для каждого компонента:

newExampleComponent() {
    return <ExampleComponent />;
}

newComponent(type) {
    return this["new" + type + "Component"]();
}

Но это будет означать новый метод для каждого компонента, который я создаю. Должно быть более элегантное решение этой проблемы.

Я очень открыт для предложений.

Ответы на вопрос(8)

Ваш ответ на вопрос