react组件动态可配置展示

react组件动态可配置展示

记项目中遇到的一个小问题吧，有一天产品提出要将首页打造成可自定义配置的页面，通过公司后台来控制页面有哪些模块，这些模块位置、数量都不固定
假设我们默认写一个页面从上到下的顺序为：banner - 页内导航 - 内容 - 底部导航，现在提出需求又后台来配置显示内容，后台可能配置：导航-banner-内容 -banner-底部导航 - xxx 等

首先我们实现一个基础版本的，首先声明First 组件 、second 组件、 Third 组件。然后将这三个组件动态排序，

import React, {
   Component} from 'react';
import ReactDom from "react-dom";
import {
   observer, inject} from "mobx-react";
import First from "./moreComponent/First";
import Second from "./moreComponent/Second";
import Third from "./moreComponent/Third";

@inject('FirstData') @observer
class App extends Component {
   
    constructor(<