Question

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

import Light from 'light.jsx';

[...]

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

不幸的是，这种方法不起作用。我得到这个错误非控制台：

警告：＆lt; Light /＆gt;使用大写的HTML。始终使用小写HTML React中的标签。警告：标签＆lt; Light＆gt;在这方面未被认识到浏览器。如果您想渲染一个React组件，请使用其名称一个大写的字母。

我尝试了很多组合，如：

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

它们都返回相同的错误。

显然，如果我使用：

return <Light />

它有效。

Answer 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

Answer 2

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

（1）您写的导入会在第一个DoubleQuotes上出现此错误：“意外的令牌”。所有导出语句都由IDE加下划线;

（2）我无法从Dynamic.Light中删除双引号，因为这假设我知道Light组件存在。但所有这些东西我试图让工作是防止开发人员知道它们。我收到一个列表，列出了从循环中管理这些信息的数据库。我需要更灵活。

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

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

React Js - 从String创建组件不起作用

2 个答案: