Есть вот такой код:
import React, {useState, useEffect} from 'react';
import { Container } from 'react-grid-system';
import Header from '../../ui/header';
import Footer from '../../ui/footer';
export default (props) => {
const DynPage = require('./' + props.name);
return(
<div>
<Header />
<Container>
<DynPage />
</Container>
<Footer />
</div>
)
}
Это база, добавится еще несколько эффектов, но даже в таком состоянии он не функционирует.
Пишет вот такую ошибку:
Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.
Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
Из кода идея понятна, но постараюсь объяснить. Я хочу из одного компонента (index.js) подгружать "глупые" компоненты, которые лежат рядом. Все они идентичны, и всем нужен один и тот же функционал, меняется только текст. Именно поэтому вынес только текст в сторонние файлы.
Код работает, если выполнить import заранее и потом создать что то в духе асс. массив, где перечислены все компоненты, но это очень грязно, хотелось бы вот таким способом. В дальнейшем оберну в try...catch
P.S. props.name передается из роутера, с ним все ок
