Реагировать на разделение презентации / контейнера

Question

Хорошо, я пытаюсь создать проект, используя дизайн контейнеров / презентационных компонентов, но мне не хватает какой-то информации или знаний.

Я пытаюсь сделать компонент на основе его родителя.тип компонента:

У меня есть этот маршрут: http://localhost:3000/:componentId

componentId имеет внутреннюю модель с типом (HTML или Text).

ИтакЯ думаю, я мог бы создать Component со следующей структурой:

page.js :

const HtmlPage = props => {
    return <Fragment>My HTML Component</Fragment>
};

const TextPage = props => {
    return <Fragment>My Text Component</Fragment>
};

// material-ui styles
const HtmlComponent = withStyles(styles)(HtmlPage);
const TextComponent = withStyles(styles)(TextPage);

export {
    HtmlComponent,
    TextComponent
};

index.js :

import {
    HtmlComponent as HtmlPage,
    TextComponent as TextPage
} from './page';

class Component extends React.Component {
    constructor(props) {
        super(props);
        this.state = { componentType: 'HTML' };
    }

    componentDidMount() {
        // Retrieve model's type from backend
    }

    render() {
        switch(this.state.componentType) {
            case 'HTML':
                return <HtmlPage />;
            case 'Text':
                return <TextPage />;
        }
    }
}

export default Component;

Итак, мой вопрос: правильно ли сформирован этот компонент, или я должен создать несколько компонентов для HtmlPage и TextPage, а затем импортировать их на родительский элемент Component?

Любой комментарий приветствуется.