在reactjs中导入动态组件

Question

对react.js来说是相当新的东西，但是却为一个概念制作原型并陷入困境。

我想拥有一个将变量名传递回来的组件（它是从API获得的），然后根据该名称导入一堆在文件夹结构中共享相同名称的文件，即：

资料夹结构

src/components/test/comp1.js
src/components/test/comp2.js

然后在我的应用程序组件中

import GetName from './components/apiRequest.GetName';
import Comp1 from './components/<GetName />/comp1';

GetName是否会传递“测试”-但是我做不到，我只是得到“编译失败”-关于我要去哪里的任何想法？

Answer 1

您建议的方式将不起作用，因为GetName将返回一个React组件，而不是您可以插入的纯字符串。

假设您具有一个返回纯字符串而不是组件的GetName函数，则可以使用require api进行动态导入。

//external module
function GetName(){
 //here you put your logic to return the name
 return "MyComponent";

}

和

class App extends Component {
  //App component
  render(){
    const myComp = require(`./components/${GetName()}`).default;
  }

}