如何基于依赖性导入React组件

How do I import React component based on a dependancy?

本文关键字：React 组件 导入 依赖性 何基于      更新时间：2023-09-26

我第一次使用React（babel）和jsx，并使用Webpack创建我的bundle.js

我已经装入了两个React组件——Header1.jsx和Header2.jsx.

如果在2016年7月4日之前->使用Header1.jsx
如果在2016年7月4日之后->使用Header2.jsx

要将组件导入React，我使用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';
}

我怎样才能做到这一点？

您不能动态导入模块，但您可以将它们作为常规模块导入

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 />;
}
相关文章：