Javascript 如何通过字符串动态创建自定义组件

嗨，我需要帮助我创建自定义组件列表的方法。 该方法对4个组件（包、主题、部分、知识）具有相同的逻辑。我只需要改变一件事，就是我推到列表中的组件

我试过类似的方法，但这是一个奇怪的错误：

index.js:1 Warning: <Package /> is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.

---

React.createElement

需要组件类/函数来创建组件，而不是字符串。字符串仅用于创建DOM元素，这些元素必须以小写字母开头

改为这样做：

import Package from '...';

React.createElement(Package, ...);

如果需要参数化元素的创建，可以像其他变量一样传递组件类型。例如，如果您想将

makeListOfTypedItems

更改为使用动态组件类型，它可能看起来像这样（抱歉，没有理解原始代码的意图，因此它们可能不是您的意思）：

---

您不应该使用字符串，因为它们不是可摇动的树。这是一个类型安全的解决方案

export type TypedItems = Package | Theme | Part | Knowledges;

export class SubjectDashboardUtils {
    static makeListOfTypedItems<T extends TypedItems>(list: any[], itemType: {new(): T; }): (T)[] {
        console.log(list);
        console.log(itemType);
        const items = [];
        return list.map((data, key) => {
            return React.createElement(itemType, {key, data})
        });
    }
}


// Use it like so

const packages = SubjectDashboardUtils.makeListOfTypedItems(['data'], Package);
const parts = SubjectDashboardUtils.makeListOfTypedItems(['data'], Part);

导出类型TypedItems=包|主题|部分|知识；
导出类主题DashboardUtils{
静态makeListOfTypedItems（列表：any[]，itemType:{new（）：T；}）：（T）[]{
控制台日志（列表）；
console.log（itemType）；
常量项=[]；
返回列表.map（（数据，键）=>{
return React.createElement（itemType，{key，data}）
});
}
}
//像这样使用它
const packages=SubjectDashboardUtils.makeListOfTypedItems（['data']，Package）；
const parts=SubjectDashboardUtils.makeListOfTypedItems（['data']，Part）；

---

这样做的好处是继承类型安全性。你甚至可能有一种类型的

列表

不存在，但对于这一点，我对React了解不够。

这并不能解决我的问题。在上面的方法中，我通过参数获取itemType。这是字符串（包、主题、部分、知识），我必须使用此字符串创建组件还有其他方法吗？我知道我可以使用switch，但我希望有更好的方法为什么必须使用字符串创建？您不能将组件类型作为参数传递吗？我还没有测试过，但类似于我的编辑可能会起作用。我无法做到这一点：/尤其是带有导出类型的零件。。。。我收到此错误：``类型为'typeof Package'的参数不可分配给类型为'Package'的参数。`

类型为'typeof Package'的参数缺少类型为'ThemePartKnowledge'的以下属性：状态、组件更新、呈现、上下文等。TS

我已经更新了类型，我在那里有一两分钟的错误

import { ComponentType } from 'react';

// ...

export class SubjectDashboardUtils {
  static makeListOfTypedItems<
    DataType, 
    Cmp extends ComponentType<{ data: DataType }>
  >(list: Array<DataType>, DynamicComponent: Cmp) {
    return list.map((item, key) => <DynamicComponent key={key} data={item}/>);
  }
}

SubjectDashboardUtils.makeListOfTypedItems(items, Package);

export type TypedItems = Package | Theme | Part | Knowledges;

export class SubjectDashboardUtils {
    static makeListOfTypedItems<T extends TypedItems>(list: any[], itemType: {new(): T; }): (T)[] {
        console.log(list);
        console.log(itemType);
        const items = [];
        return list.map((data, key) => {
            return React.createElement(itemType, {key, data})
        });
    }
}


// Use it like so

const packages = SubjectDashboardUtils.makeListOfTypedItems(['data'], Package);
const parts = SubjectDashboardUtils.makeListOfTypedItems(['data'], Part);