当我使用 Routes 显示 Web 应用程序页面时，如何为模板标签添加 HTML 页面答案

【问题标题】：How do I add an HTML page for template tags when I am using Routes to display web app pages当我使用 Routes 显示 Web 应用程序页面时，如何为模板标签添加 HTML 页面
【发布时间】：2017-12-16 09:49:10
【问题描述】：

我正在学习使用路由连接所有页面的 Udemy 教程。但是，我需要向我的网络应用程序（具有验证等）添加一个表单。我找到了 aldeed:autoform 但它使用 HTML 模板标签。据我了解，我的 React 组件无法在 JSX 中正确渲染模板标签？基本上我需要添加的文本如下所示（取自 autoform 文档）：

<template name="insertBookForm">
  {{> quickForm collection="Books" id="insertBookForm" type="insert"}}
</template>

是否可以从路由链接到 html 页面？这是我现在在 routes.js 中的内容，我需要 /submit 才能呈现该模板表单：

<Router history={browserHistory}>
    <Route onEnter={globalOnEnter} onChange={globalOnChange}>
      <Route path="/" component={HomePage} privacy="unauth"/>
      <Route path="/login" component={Login} privacy="unauth"/>
      <Route path="/signup" component={Signup} privacy="unauth"/>
      <Route path="/submit" component={Submit} privacy="unauth"/>
      <Route path="*" component={NotFound}/>
    </Route>
  </Router>

我的问题有意义吗？我的默认 main.html 如下所示：

<head>
  <title>Notes App</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
  <link rel="icon" type="image/png" href="/images/favicon.png"/>
</head>

<body>
  <div id="app"></div>
</body>

我的网络应用程序的整个主体都链接到路由（这是在我的 main.js 客户端中）：

Meteor.startup(() => {
  ReactDOM.render(routes, document.getElementById('app'));
});

【问题讨论】：

标签： javascript html reactjs meteor html5-template

【解决方案1】：

你把 Blaze 和 React 混为一谈了。 aldeed:autoform 使用 Blaze 作为 UI 层。如果你想坚持纯 React，目前唯一的选择是使用另一个库。制服可能是一个不错的选择：https://github.com/vazco/uniforms

如果你愿意将 Blaze 与 React 一起使用，你可以使用 aldeed:autoform。我自己还没有尝试过，但它看起来类似于：

流星官方React tutorial where they use a similar technique to use the Meteor AccountsUI package (which is also built in Blaze) to load the loginButtons using a React component:'Stolen'

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Template } from 'meteor/templating';
import { Blaze } from 'meteor/blaze';

export default class QuickForm extends Component {
  componentDidMount() {
    // Use Meteor Blaze to render quickForm
    this.view = Blaze.render(Template.quickForm,
      ReactDOM.findDOMNode(this.refs.container));
  }
  componentWillUnmount() {
    // Clean up Blaze view
    Blaze.remove(this.view);
  }
  render() {
    // Just render a placeholder container that will be filled in
    return <span ref="container" />;
  }
}

【讨论】：

啊完美，这就是我的心理脱节的地方！明白了，谢谢你的澄清