Javascript 当我使用路由显示web应用程序页面时，如何为模板标记添加HTML页面_Javascript_Html_Reactjs_Meteor_Html5 Template

Javascript 当我使用路由显示web应用程序页面时，如何为模板标记添加HTML页面

javascript html reactjs meteor

Javascript 当我使用路由显示web应用程序页面时，如何为模板标记添加HTML页面,javascript,html,reactjs,meteor,html5-template,Javascript,Html,Reactjs,Meteor,Html5 Template,我遵循的是我的教程中使用路由连接所有页面的部分。但是，我需要向我的web应用程序添加一个具有验证等功能的表单。我找到了aldeed:autoform，但它使用HTML模板标记。据我所知，我的React组件无法在JSX中呈现模板标记，对吗？基本上，我需要添加的文本看起来像来自autoform文档： <template name="insertBookForm"> {{> quickForm collection="Books" id="insertBookForm" type

我遵循的是我的教程中使用路由连接所有页面的部分。但是，我需要向我的web应用程序添加一个具有验证等功能的表单。我找到了aldeed:autoform，但它使用HTML模板标记。据我所知，我的React组件无法在JSX中呈现模板标记，对吗？基本上，我需要添加的文本看起来像来自autoform文档：

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

我的问题有意义吗？我的默认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>

你把火焰和反应混在一起了。aldeed:autoform使用Blaze作为UI层。如果您想坚持使用纯React，目前唯一的选择是使用另一个库。制服可能是一个很好的选择：

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

从Meteor的官方网站“被盗”

啊，太好了，这就是我精神上的脱节！明白了，谢谢你的澄清

<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>

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

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" />;
  }
}