Wie importiere ich die React-Komponente basierend auf einer Abhängigkeit?

Question

Ich verwende reagieren (babel) und jsx zum ersten Mal und Webpack für die Erstellung meiner bundle.js

Ich habe crated zwei Komponenten reagieren - Header1.jsx und Header2.jsx.

Wenn vor 4.July 2016 -> Header1.jsx verwenden
Wenn nach 4.July 2016 -> Header2.jsx verwenden

die Komponenten zu importieren, in IREACT bin mit index.js:

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

Grundsätzlich möchte ich einen Code, der dies tut:

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

Wie kann ich das erreichen?

Answer 1

Sie keine Module importieren dynamisch können, jedoch können Sie sie wie gewohnt Module

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

importieren und sie dann durch Bedingung machen

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

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