如何在反应中创建动态组件？

Question

所以我想创建一个名称来自后端的动态反应组件，例如：

[
  {
    "data": {
      "header": "this is header one",
      "article": "this is article one"
    },
    "componentname": "Articleone"
  },
  {
    "data": {
      "header": "this is header two",
      "article": "this is article two"
    },
    "componentname": "Articletwo"
  }
]

所以我想根据来自后端的数据创建组件，正如您在componentname中看到的那样。

所以我对其进行了研究，发现的结果是：

  const ComponentName = (data) => {
    const Component = data[0].componentname;
    const data = data[0].data;
    return <Component data={data} />;
  };

我试过了，但是它给出了一个错误：

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

我尝试了许多其他方法，但注意对我有用。

我怎样才能创建一个反应动态组件。

Answer 1

尝试使用componentname s 创建一个枚举作为您要使用的组件的属性：

import { ComponentA, ComponentB, ComponentC } from '../components';

export const COMPONENTS_ENUM = {
  Articleone: ComponentA,
  Articletwo: ComponentB,
  Articlethree: ComponentC,
};

然后在要动态使用这些组件的组件中，您可以执行以下操作：

import { COMPONENTS_ENUM } from '../constants';

const ComponentName = (data) => {
  const componentName = data[0].componentname;
  const data = data[0].data;

  const Component = COMPONENTS_ENUM[componentName];

  return <Component data={data} />;
};