从 Meteor 的导入文件夹中渲染模板答案

【问题标题】：Rendering a template from the imports folder in Meteor从 Meteor 的导入文件夹中渲染模板
【发布时间】：2018-08-17 04:36:17
【问题描述】：

据我了解，imports 文件夹的目的是将您导入到main.js 的所有代码存储在client 文件夹中。我正在尝试实现easysearch:autosuggest，并且在客户端文件夹上的main.html 中有一个使用以下内容的基本示例：

<body>

  <div id="render-target"></div>
    <div>
        {{>searchBox}}

    </div>
</body>

<template name="searchBox">

    <div class="autosuggest-component">
        {{> EasySearch.Autosuggest index=PlayersIndex}}
    </div>

</template>

在客户端文件夹中的main.js 中，我从'../imports/ui/App.js' 导入App 并渲染它：

Meteor.startup(() => {

 render(<App />, document.getElementById('render-target'));

});

所以我尝试将main.html 中的模板粘贴到导入文件夹中App.js 内的render() 函数中，但这给了我一个指向{{>searchBox}} 的unexpected token 错误。我是 Meteor/node 的新手，我不确定我做错了什么，也试图从结构的角度了解我是否正确地做事。如果我必须构建我的应用程序客户端，导入文件夹有什么意义？如何使用App.js 和render() 使其工作？

【问题讨论】：

你是故意同时使用 Blaze（Meteor 自己的前端渲染系统）和 react.js 吗？
@TomScholz 不，我只是按照 Meteor 网站上的 To Do 教程进行操作（使用 react - meteor.com/tutorials/react/creating-an-app）。我做错了吗？
我建议您先熟悉react，然后再从教程开始。你不能在 react 中只渲染普通的 Blaze 模板。

标签： javascript templates meteor autosuggest meteor-easy-search

【解决方案1】：

这里的问题是您将两个前端库混合在一起。

前端库是我们可以用来帮助我们构建应用程序用户界面的工具。人们与 Meteor 一起使用的一些流行的方法是 Blaze、React 和 Angular.js

您使用的语法{{>searchBox}} 是 Blaze 库用来呈现 Blaze 模板的语法。

但是，在您的 Meteor.startup() 块中，您正在使用 React 所需的代码。您还表示您一直在关注 React 教程。不幸的是，您不能将这两者混合使用。

我建议你重新开始follow this tutorial instead。这与您已经在做的教程完全相同，但它是 Blaze 版本 - 它可以与您一直使用的语法一起使用 - {{>searchBox}}

希望对你有帮助

【讨论】：

谢谢，我想我现在明白了。你介意在有时间的时候看看这个问题吗？ stackoverflow.com/questions/49183231/react-search-basic-example/… ... 非常感谢所有帮助。