2

modules对 Meteor 1.3 中的 ES2015 感到非常兴奋。我们使用 Meteor 1.2 编写了一个中等复杂度的应用程序。由于我们有大量的模板和文件,在客户端下载内容需要一些时间。所以我对使用import. 从流星之夜谈话中,他们说 Blaze 模板仍然是全局的,无法导入(或延迟加载),我尝试使用ReactinsideBlaze

  • 添加react-template-helper包使用meteor add react-template-helper
  • 创建imports文件夹并添加testComponent.jsx导出“TestComponent”的文件

    //testComponent.jsx
    import React from 'react';
    
    export default class TestComponent extends React.Component {
      render() {
        return (
            <div>
                <h1>TestComponent</h1>
                <div>This is from Test Component</div>
            </div>
        );
      }
    }
    
  • 在 Blaze 模板外部imports文件夹中之后,

    <!-- homeReact template html-->
    <template name="homeReact">
        <div>
            {{> React component=TestComponent}}
        </div>
    </template>
    
  • 在模板的 js 文件中,该文件也在导入文件夹之外

    // homeReact template js
    import { Template } from 'meteor/templating';
    
    import TestComponent from '/imports/testComponent.jsx`;
    
    Template.homeReact.helpers({
      TestComponent() {
        return TestComponent;
      }
    });
    

这有效,但在imports/testComponent.jsx客户端下载(使用 chrome 开发工具 - 源选项卡检查),即使当前路线不需要homeReact模板。

然后我用require而不是import这样,

    // homeReact template js
    import { Template } from 'meteor/templating';

    Template.homeReact.onCreated(function () {
        this.TestComponent = require('/imports/testComponent.jsx').TestComponent;
    });

    Template.homeReact.helpers({
      TestComponent() {
        return Template.instance().TestComponent;
      }
    });

这段代码也下载了imports/testComponent.jsx文件,但另外我也得到了一个错误

在模板“homeReact”中,调用{{> React ... }}缺少的component参数。

所以,我的问题是,是否可以仅在需要时延迟加载(下载)文件?

4

0 回答 0