如何根據依賴性導入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 />; 
}