React Js - 从字符串创建组件不起作用答案

【问题标题】：React Js - Create component from String doesn't workReact Js - 从字符串创建组件不起作用
【发布时间】：2018-02-20 11:30:54
【问题描述】：

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

import Light from 'light.jsx';

[...]

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

不幸的是，这种方法行不通。我在非控制台收到此错误：

警告：正在使用大写 HTML。始终使用小写 HTML React 中的标签。警告：标签在此无法识别浏览器。如果您打算渲染一个 React 组件，请以一个大写字母。

我尝试了很多组合，例如：

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

它们都返回相同的错误。

显然，如果我使用：

return <Light />

它有效。

【问题讨论】：

像这样创建一个元素和字符串的映射：let map = {"Light": Light, "Fan": Fan}，然后使用它：let DynamicComponent = map["Light"]，然后您将能够像这样渲染它：<DynamicComponent />，如果它告诉我未能解决您的问题或您需要任何其他帮助。
嗨。谢谢你的回答，但你的解决方案不是我想要的。您正在创建一个将字符串连接到组件的关联数组（它有效）。在我的情况下（是创建命名空间导入系统的第一步，我不能直接使用该组件。我需要这样的东西： let mapsOfComponent = ["Light","Fan"] let DynamicComp = mapsOfComponent[0];返回
好的，但是在同一个文件中，您必须先导入所有组件，对吗？比如import Light ....;, import Fan ....等？
我使用一种奇怪的方法来实现某种命名空间导入，使用基于谷歌的教程（搜索反应命名空间，第一个结果）以允许通配符导入，因此每个新组件都必须添加到一个文件中仅（allimport.js），因此从数据库中获取的组件的动态列表可能有效：import * as Dynamic from 'allimport.js'; 然后：let DynamicComponent = "Dynamic.Light"; return <DynamicComponent /> 然后在 allimport.js 中 import Light from './light.jsx'; import Fan from './fan.jsx';

标签： javascript reactjs

【解决方案1】：

正如您在评论中提到的，您将所有导入放在这样的文件中：

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 />

一切正常，去掉"Dynamic.Light"周围的""，应该是Dynamic.Light。

有关更多详细信息，请查看此答案：Dynamically rendering component from string: ReactJS

【讨论】：

【解决方案2】：

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

（1）您编写的导入在第一个 DoubleQuotes 处出现此错误：“Unexpected token”。 IDE所有的export语句都是红色下划线的；

(2) 我无法从 Dynamic.Light 中删除双引号，因为这假设我知道存在 Light 组件。但是我试图使所有这些东西起作用是为了防止开发人员了解它们。我从 DB 中接收到要呈现的内容列表，在循环中管理这些信息。我需要更加灵活。

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

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

【讨论】：

我终于找到了一个可行的解决方案。不完全是最好的，但它有效，我很好。首先，import.js 必须是这样的：import Light from 'light.jsx'; var dynamic_components = { }; dynamic_components['light'] = Light; export default (dynamic_components);，而不是在组件类中，你可以简单地：import dynamic_components from 'allimport.jsx'; 然后let DynamicComp = dynamic_components['light']; return <DynamicComp />