[已解决]React如何根据过字符串生成组件

#1

例如我想通过循环数组生成组件:

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

const arr = ['Button', 'Input']; // 生成一个<Button /> 和一个<Input />

export default class MyComp extends Component {
  renderComp = arr => {
    return  arr.map(V => {
      return React.createElement(this.transform(V), null, null)
      // 必须通过一个函数把字符串转换为对应组件才可以执行
      // 我希望可以直接通过 <V /> 或者 React.createElement(V, null, null) 获得<Button /> 和 <Input />
    }) 
  }

  transform = str => {
  switch(str){
    case 'Button':
    return Button;
    case 'Input':
    return Input;
    default:
    return null;
  }
  }

  render(){
  return(
    <div>
    {this.renderComp(arr)}
    </div>
  )
  };
}

请问该如何操作?
已经尝试过的还有new Function、dangerouslySetInnerHTML和eval
都无法实现=- =

#2

React 给了什么提示?

#4

生成了html原始的组件,
就是不能生成import的组件

#5

最终解决方案

import React, { Component } from 'react';
require("antd/dist/antd.css");

const _antd = require("antd");

const _interopRequireDefault = obj => {
  return obj && obj.__esModule ? obj : { default: obj };
};

const _antd2 = _interopRequireDefault(_antd);

const arr = ['Button', 'Button'];

export default class MyComp extends Component {
  renderComp = arr => {
    return arr.map(v => {
      return React.createElement(_antd2[v], null, 123);
      //<Input /> 设置children为字符串会报 xss错误 所以改成两个<Button />了
    }) 
  }
  render(){
  return(
    <div>
    {this.renderComp(arr)}
  </div>
  )
  };
}
1 Like
#6

所以是引用的地方有点问题, 没有处理 .default 属性的影响?

#7

没有使用过.default属性
所以不太清除您表达的意思.