使用路径显示web应用程序页面时，如何为模板标签添加HTML页面
使用路径显示web应用程序页面时，如何为模板标签添加HTML页面
提问于 2017-07-12 14:08:51
我遵循了Udemy的一个教程，该教程使用路由连接所有页面。但是，我需要向我的web应用程序添加一个表单(具有验证等功能)。我找到了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>其中我的web应用程序的整个主体链接到路由(这是在我的main.js客户端中)：
Meteor.startup(() => {
ReactDOM.render(routes, document.getElementById('app'));
});回答 1
Stack Overflow用户
回答已采纳
发布于 2017-07-12 17:10:05
你把Blaze和React搞混了。aldeed:autoform使用Blaze作为UI层。如果你想坚持使用纯React，现在唯一的选择就是使用另一个库。制服可能是一个很好的选择：https://github.com/vazco/uniforms
如果你愿意在使用React的同时使用Blaze，你可以使用aldeed:autoform。我自己还没有尝试过，但它看起来像这样：
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" />;
}
} 页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/45049675
复制相关文章
相似问题