Javascript React Js-从字符串创建组件'；行不通

我想创建一个使用字符串的组件列表。 在Google/StackOverflow上搜索，这似乎很容易：

import Light from 'light.jsx';

[...]

getComponent()
{
  let DynamicComponent = "Light";
  return <DynamicComponent />;
}

从“Light.jsx”导入灯光；
[...]
getComponent（）
{
让DynamicComponent=“Light”；
返回；
}

不幸的是，这种方法不起作用。 我在非控制台上收到此错误：

警告：正在使用大写HTML。始终使用小写HTML 标签在反应。警告：此文件中无法识别标记 浏览器如果要渲染React组件，请以 大写字母

我尝试过很多组合，比如：

return React.createElement(DynamicComponent, {}) };
return React.createElement("Light", {}) };
return <div> { React.createElement(DynamicComponent, {}) }</div>;

返回React.createElement（DynamicComponent，{}）；
返回React.createElement（“Light”，{}）；
返回{React.createElement（DynamicComponent，{}}）；

它们都返回相同的错误

显然，如果我使用：

return <Light />

返回

---

它可以工作。

正如您在评论中提到的，您正在将所有导入放入一个文件中，如下所示：

import Light from './light.jsx'; 
import Fan from './fan.jsx';

export {
    "Light": Light,
    "Fan": Fan
}

并尝试使用：

import * as Dynamic from 'allimport.js'; 
let DynamicComponent = "Dynamic.Light";
return <DynamicComponent />

import*作为动态从'allimport.js'导入；
让DynamicComponent=“Dynamic.Light”；
返回

一切正常，只需删除

“Dynamic.Light”周围的
“
”

，它应该是

Dynamic.Light

---

有关更多详细信息，请查看此答案：

很抱歉打扰您，但我仍然收到一些错误：

（1） 您编写的导入在第一个双引号处出现此错误：“意外标记”。所有导出语句都用IDE加上红色下划线

（2） 我无法从Dynamic.Light中删除双引号，因为这假设我知道存在灯光组件。 但是，我想让这些东西发挥作用，是为了阻止开发人员了解它们。我从DB收到一个列表，其中列出了在循环中管理这些信息时要呈现的内容。我需要更灵活一些

listOfComponentFromDB.map(name){
   let DynamicComponent = "Dynamic."+name;
   allRendered.push(<DynamicComponent />);
}
return allRendered;

listOfComponentFromDB.map（名称）{
让DynamicComponent=“Dynamic.”+name；
allRendered.push（）；
}
归还所有已提交的文件；

---

使用这种向主渲染添加新组件的方法，无需修改主渲染，因为您只需将ne fan.jsx放入目录中，将其添加到导入并在DB上插入新行。

创建元素和字符串的映射，如下所示：

let map={“Light”：Light，“fan”：fan}

然后使用以下命令：

让DynamicComponent=map[“Light”]

，这样您就可以渲染它：

，如果它无法解决您的问题或您需要任何其他帮助，请告诉我。您好。谢谢你的回答，但你的解决方案不是我想要的。您正在创建一个关联数组，用于将字符串连接到组件（它可以工作）。在我的例子中（是创建命名空间导入系统的第一步），我不能直接使用该组件。我需要这样的东西：let mapsOfComponent=[“Light”，“Fan”]let DynamicComp=mapsOfComponent[0]；return ok明白了，但是在同一个文件中，你必须首先导入所有组件，对吗？如

import Light….；，import Fan….

etc？我使用一种奇怪的方法，使用基于google的教程实现某种名称空间导入（search react namespase，第一个结果）要允许通配符导入，因此每个新组件都必须只添加到一个文件（allimport.js），以便从DB获取的组件动态列表可以工作：

import*作为动态从'allimport.js'；

然后：

let DynamicComponent=“dynamic.Light”；return

然后在allimport.js中

从'/Light.jsx'导入灯光；从'/Fan.jsx'导入风扇；

我终于得到了一个有效的解决方案。虽然不完全是最好的，但它可以工作，我也可以使用它。首先，import.js必须是这样的：

从'Light.jsx'导入灯光；var dynamic_components={}；dynamic_components['light']=light；导出默认值（dynamic_components）；

比在component类中，您只需：

从'allimport.jsx'导入dynamic_components；

然后

让DynamicComp=dynamic_components['light']；返回