文章/答案/技术大牛

发布

社区首页 >问答首页 >在reactjs中导入动态组件

问在reactjs中导入动态组件
EN

Stack Overflow用户

提问于 2018-05-30 01:27:26

回答 1查看 354关注 0票数 2

我希望有一个组件，它返回一个变量名称(它从API获得)，然后基于该名称，导入一组在文件夹结构中共享相同名称的文件，即；

文件夹结构

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

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

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

如果GetName会提供“测试”--但我不能这样做，我只是得到了一个“编译失败”--你知道我哪里错了吗？

发布于 2018-05-30 01:41:16

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

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

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

}

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/50589838

复制

相似问题

问在reactjs中导入动态组件EN