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？

任何评论表示赞赏。

进行表述/容器组件分离

0 个答案: