如何根据依赖性导入React组件？

Question

我使用的阵营（巴贝尔）和JSX首次和的WebPack创建我的bundle.js

我装箱2反应的组分 - Header1.jsx和Header2.jsx。

如果4.July 2016年前 - >使用Header1.jsx
如果4.July 2016年以后 - >使用Header2.jsx

要导入组件到做出反应，我使用index.js：

import SportMenu from './components/SportMenu.jsx'; 
import NextMatches from './components/NextMatches.jsx'; 
(...) 

基本上我想要做这个代码：

var eventStart = new Date('2016-06-10T21:00:00+02:00'); 
var now = new Date(); 

if(nowgetDate().getDate() < eventStart.getDate()){ 
    import EmCountdown from './components/Countdown.jsx'; 
} else { 
    import FocusMenu from './components/FocusMenu.jsx'; 
} 

我怎样才能做到这一点？

Answer 1

你不能动态地导入模块，但是你可以将其导入照常模块

import SportMenu from './components/SportMenu.jsx'; 
import NextMatches from './components/NextMatches.jsx'; 
import EmCountdown from './components/Countdown.jsx'; 
import FocusMenu from './components/FocusMenu.jsx'; 

，然后根据条件使其

var eventStart = new Date('2016-06-10T21:00:00+02:00'); 
var now = new Date(); 

if (now < eventStart){ 
    <EmCountdown />; 
} else { 
    <FocusMenu />; 
}