import React, { Component } from 'react';
import { Button, Input } from 'antd';


const arr = ['Button', 'Input']; // 生成一個(gè)<Button /> 和一個(gè)<Input />

export default class MyComp extends Component {
  transform = str => {
      switch(str){
        case 'Button':
        return Button;
        case 'Input':
        return Input;
        default:
        return null;
      }
  }
  renderComp = arr => {
    // 通過定義對象 key 指定 value 為組件即可
    const components = {
        Button, 
        Input
    }
    return arr.map(V => {
        // React.createElement 第一個(gè)參數(shù)接收的就是個(gè)字符串
        // 你通過 transform 方法拿到的就是組件實(shí)例了
        // 因?yàn)槟隳阍?transform return 出來的就是個(gè)組件

        // 我認(rèn)為可以這樣(直接通過組件名稱調(diào)用 createElement創(chuàng)建組件)
        return React.createElement(V, null, null)
        // 或者這樣 (通過組件名稱返回對應(yīng)的組件)
        return this.transform(V)
        // 再或者這樣 (直接獲取key 對應(yīng)的組件)
        return components[V]
    }) 
  }
}

renderComp = arr => {
    return arr.map(V => {
      return React.createElement(this.transform(V), null, null)
      // 必須通過一個(gè)函數(shù)把字符串轉(zhuǎn)換為對應(yīng)組件才可以執(zhí)行
      // 我希望可以直接通過 <V /> 或者 React.createElement(V, null, null) 獲得<Button /> 和 <Input />
    }) 
  }

少了個(gè)return