javascript - 在reactjs中导入动态组件

对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是否会传递“测试”-但是我做不到，我只是得到“编译失败”-关于我要去哪里的任何想法？

最佳答案

您建议的方式将不起作用，因为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;
  }

}

关于javascript - 在reactjs中导入动态组件，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/50589838/