react动态创建自定义组件

Question

问题描述

react如果动态加载自定义

问题出现的环境背景及自己尝试过哪些方法

import { ChartLine, ChartBar } from "../Tool";
const dashBoard = [
  {
    ChartLine: {
      x: 420,
      y: 37,
      width: 326,
      height: 58
    }
  },
  {
    ChartBar: {
      x: 420,
      y: 37,
      width: 326,
      height: 58
    }
  }
];
class EditDash extends Component {
  render() {
    return (
      <div>
        {dashBoard.map((item, key) => {
          console.log(item);
          return "<" + Object.keys(item) + "></" + Object.keys(item) + ">";
        })}
      </div>
    );
  }
}

这样写貌似不行

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

你期待的结果是什么？实际看到的错误信息又是什么？

Answer 1

数据中增加key

{
    ChartLine: {
      x: 420,
      y: 37,
      width: 326,
      height: 58,
      component: ChartLine
    }
}

拿component这个key去生成标签

  dashBoard.map((item, key) => {
    const components = [];
    for (const {component, ...rest} of Object.values(item)) {
      components.push(<component {...rest} />);
    }
    
    return components;
  })

我用了Object.values，所以其实外面那层key没用，可以这样改:

const dashBoard = [
  [
    {
      x: 420,
      y: 37,
      width: 326,
      height: 58,
      component: ChartLine
    }
  ],
  [
   {
      x: 420,
      y: 37,
      width: 326,
      height: 58,
      component: ChartBar
    }
  ]
];

---

还有一种方案就是做个单独的maps

const maps = {
  ChartLine: ChartLine,
  ChartBar: ChartBar,
};

这样你可以保持原来的数据结构，key也变得有意义。