时间戳

首页 > 解决方案 > React 展示/容器组件分离

javascript - React 展示/容器组件分离

问题描述

好的，我正在尝试使用容器/演示组件设计制作一个项目，但我缺少某种信息或知识。

我想要做的是根据它的父组件的类型来渲染一个组件：

我有这条路线：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？

任何评论表示赞赏。

标签： javascriptreactjsecmascript-6containers

解决方案

推荐阅读