在reactjs中导入动态组件

Question

对react.js来说相当新，但原型设计概念并陷入困境。

我希望有一个组件可以返回一个变量名（它来自API），然后根据该名称导入一堆文件，这些文件在文件夹结构中共享相同的名称，即;

文件夹结构

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

然后在我的App组件中

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

GetName会传递＆＃39;测试＆＃39; - 但是我不能这样做，我只是得到了一个未能编译的＃39; - 关于我哪里出错的任何想法？

Answer 1

您建议的方式无法正常工作，因为GetName将返回React Component，而不是您可以插入的纯字符串。

假设您有一个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;
  }

}