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

}