# React模块配置型渲染

import React from 'react';
import CmpA from './cmp_a';
import CmpB from './cmp_b';
import CmpC from './cmp_c';
class Father extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            moduleList: [],
        };
    }
    componentDidMount() {
        this.initModules();
    }
    // 初始化各模块
    initModules = () => {
        const {
            AOnline,
            AOrder,
            BOnline,
            BOrder,
            COnline,
            COrder,
        } = this.props.moduleConf;
        const defaultList = [
            {
                component: CmpA,
                online: AOnline,
                order: AOrder || 11,
            },
            {
                component: CmpB,
                online: BOnline,
                order: BOrder || 12,
            },
            {
                component: CmpC,
                online: COnline,
                order: COrder || 13,
            },
        ];
        // 模块排序，order越小越靠前
        this.setState({
            moduleList: defaultList.sort((a, b) => a.order - b.order)
        });
    }
    // 模块渲染
    handleRenderModules = (comp, index) => {
        if (!comp.online) {
            return null;
        }
        return this.handleRenderComp(comp.component, index);
    }
    // 组件渲染
    handleRenderComp = (Comp, index, props = {}) => {
        return <Comp key={index} {...props} />
    }
    render() {
        const { moduleList } = this.state;
        return (
        	<div>
            	{moduleList.length > 0 && moduleList.map(this.handleRenderModules)}
            </div>
        )
    }
}