如何在使用路由显示 Web 应用程序页面时为模板标签添加 HTML 页面
How do I add an HTML page for template tags when I am using Routes to display web app pages
我正在关注使用路由连接所有页面的 Udemy 教程。但是,我需要向我的网络应用程序添加一个表单(具有验证等)。我找到 aldeed:autoform 但它使用 HTML 模板标签。据我了解,我的 React 组件无法在 JSX 中正确渲染模板标签?基本上我需要添加的文本看起来像这样(取自 autoform 文档):
<template name="insertBookForm">
{{> quickForm collection="Books" id="insertBookForm" type="insert"}}
</template>
是否可以从路由 link 到 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>
我的网络应用程序的完整主体 linked 到路由(这是在我的 main.js 客户端中):
Meteor.startup(() => {
ReactDOM.render(routes, document.getElementById('app'));
});
您混淆了 Blaze 和 React。 aldeed:autoform 使用 Blaze 作为 UI 图层。如果你想坚持使用纯 React,目前唯一的选择是使用另一个库。制服可能是一个不错的选择:https://github.com/vazco/uniforms
如果您愿意将 Blaze 与 React 一起使用,您可以使用 aldeed:autoform。我自己还没有尝试过,但它看起来类似于:
'Stolen' 来自 Meteor 官方 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:
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" />;
}
}
我正在关注使用路由连接所有页面的 Udemy 教程。但是,我需要向我的网络应用程序添加一个表单(具有验证等)。我找到 aldeed:autoform 但它使用 HTML 模板标签。据我了解,我的 React 组件无法在 JSX 中正确渲染模板标签?基本上我需要添加的文本看起来像这样(取自 autoform 文档):
<template name="insertBookForm">
{{> quickForm collection="Books" id="insertBookForm" type="insert"}}
</template>
是否可以从路由 link 到 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>
我的网络应用程序的完整主体 linked 到路由(这是在我的 main.js 客户端中):
Meteor.startup(() => {
ReactDOM.render(routes, document.getElementById('app'));
});
您混淆了 Blaze 和 React。 aldeed:autoform 使用 Blaze 作为 UI 图层。如果你想坚持使用纯 React,目前唯一的选择是使用另一个库。制服可能是一个不错的选择:https://github.com/vazco/uniforms
如果您愿意将 Blaze 与 React 一起使用,您可以使用 aldeed:autoform。我自己还没有尝试过,但它看起来类似于:
'Stolen' 来自 Meteor 官方 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:
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" />;
}
}