React 組件根據數據動態渲染

數據驅動的UI界面

import React from 'react';
import * as componentLib from './components/index';
import {dataMap} from './data/dataMap';

function renderDataMap() {
    console.log(dataMap);
    const dom = dataMap.map((item, index) => {
        if(!(item.componentName && componentLib[item.componentName])){
            return null;
        }
        const TagName = componentLib[item.componentName];
    
        return (
        <TagName data={item.data} key={index} />
        );
  });
  return dom;
}

export default renderDataMap;