我有很多如下所示的代码:
import {Meteor} from 'meteor/meteor'; import {createContainer} from 'meteor/react-meteor-data';
import FoodItemList from '../components/FoodItemList.jsx';
import {FoodItems} from '../../api/FoodItems/FoodItems.js';
const FoodItemListContainer = createContainer(({imageIDFilter}) => {
const user = Meteor.user()
? Meteor.user().username
: '';
const query = {
username: {
$not: {
$eq: user
}
}
};
const foodItems = Meteor.subscribe('foodItems');
const foodItemList = FoodItems.find(query).fetch()
const loading = !foodItems.ready();
return {loading, foodItemList, imageIDFilter, user};
}, FoodItemList);
export default FoodItemListContainer
显然,当我重构时,我想删除一些样板,但我不确定如何做到这一点,因为我不知道如何动态导入我需要的文件。这在 JS React Meteor 中可能吗?
最佳答案
我刚刚写了一篇关于如何执行此操作的文章,更重要的是,何时以及为何执行此操作。
https://code.zeroasterisk.com/2017/05/meteor-1-5-bundle-optimization/
TL;DR:import('./my_component')
返回一个 Promise,当客户端拥有它时,该 Promise 就会解析。
之前:客户端 bundle 的正常导入部分
import PickDates from './PickDates';
之后:动态导入不再是客户端 bundle 的一部分
import Loader from 'react-loader';
// generic loading component to show while transfering section of code
const LoadingComponent = () => <span className="text-muted"><i className="fa fa-refresh" /></span>;
// new version of the component, now: loading --> rendered
const PickDates = Loader({
// this does the dynamic import, and returns a promise
loader: () => import('./PickDates'),
// this is our generic loading display (optional)
LoadingComponent,
// this is a delay before we decide to show our LoadingComponent (optional)
delay: 200,
});
关于javascript - JavaScript React Meteor 的动态导入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40437765/