Javascript 使用React和Node js发送电子邮件应用程序
我正在使用React和Node js创建一个电子邮件发送应用程序。我正在使用Nodemailer发送电子邮件。为了在电子邮件正文中获得丰富的HTML和CSS,我正在使用React js构建电子邮件正文。因此,一旦主体由React js呈现,它就可以作为html通过NodeEmailer发送。 到目前为止,我已经能够将nodeEmailer设置为用于简单文本、附件。我已经在Email.jsx中构建了电子邮件正文(带有响应HTML)。我放置了一个路由('/send'),以查看它在服务器端的实际外观。 我面临的问题是,如何编译我创建的这个.jsx模板,并使用NodeEmailer将其作为html发送。我知道,如果使用的是.hjs文件,我们肯定可以使用Hogan来实现这一点。但是如何才能为.jsx文件实现同样的功能呢。请容忍我,因为我是新手 这是email.jsx。我使用react js构建了带有物化页眉和页脚的电子邮件正文。 email.jsxJavascript 使用React和Node js发送电子邮件应用程序,javascript,node.js,reactjs,nodemailer,Javascript,Node.js,Reactjs,Nodemailer,我正在使用React和Node js创建一个电子邮件发送应用程序。我正在使用Nodemailer发送电子邮件。为了在电子邮件正文中获得丰富的HTML和CSS,我正在使用React js构建电子邮件正文。因此,一旦主体由React js呈现,它就可以作为html通过NodeEmailer发送。 到目前为止,我已经能够将nodeEmailer设置为用于简单文本、附件。我已经在Email.jsx中构建了电子邮件正文(带有响应HTML)。我放置了一个路由('/send'),以查看它在服务器端的实际外观。
var React = require('react');
var Layout = require('./layout');
class Email extends React.Component {
render() {
return (
<Layout title={this.props.firstName}>
<Layout text={this.props.textfield}>
{/* Compiled and minified CSS */}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css" />
{/* Compiled and minified JavaScript */}
<div className="card-panel grey lighten-4">
<nav className="white">
<div className="nav-wrapper blue-grey darken-4">
<div className="brand-logo">
<div className="material-icons">Iowa State University<img src="https://s-media-cache-ak0.pinimg.com/736x/86/36/e4/8636e44169c2d51ef9d019c855f8537c.jpg" align="right" width={60} height={60} />
</div>
</div>
</div>
</nav>
{/*<div className="col s12 m2">*/}
{/*<p className="z-depth-4">z-depth-1</p>*/}
{/*</div>*/}
<div>
<style type="text/css" dangerouslySetInnerHTML={{__html: "\n .header {\n background: #8a8a8a;\n }\n .header .columns {\n padding-bottom: 0;\n }\n .header p {\n color: #fff;\n padding-top: 15px;\n }\n .header .wrapper-inner {\n padding: 20px;\n }\n .header .container {\n background: transparent;\n }\n table.button.facebook table td {\n background: #3B5998 !important;\n border-color: #3B5998;\n }\n table.button.twitter table td {\n background: #1daced !important;\n border-color: #1daced;\n }\n table.button.google table td {\n background: #DB4A39 !important;\n border-color: #DB4A39;\n }\n .wrapper.secondary {\n background: #f3f3f3;\n }\n" }} />
<container>
<div className="card-panel grey lighten-5">
<spacer size={16} />
<row>
<columns small={6}>
<h6>Hi, {this.props.firstName}</h6>
<p className="lead">{this.props.firstParagraph}
</p>
{/*<p>{this.props.secondParagraph}*/}
{/*</p>*/}
{/*<callout className="primary">*/}
{/*<p>{this.props.thirdParagraph} </p>*/}
{/*</callout>*/}
</columns>
</row>
</div>
<wrapper className="secondary">
</wrapper>
</container>
</div>
</div>
<footer className="page-footer blue-grey darken-4">
<div className="footer-copyright blue-grey darken-4">
<div className="container">
<div class="left-align">
© 2017 Copyright
</div>
</div>
</div>
</footer>
</Layout>
</Layout>
);
}
}
Email.propTypes = {
title: React.PropTypes.string,
textfield: React.PropTypes.string,
firstParagraph: React.PropTypes.string,
// secondParagraph: React.PropTypes.string,
// thirdParagraph: React.PropTypes.string
};
module.exports = Email;
那么,如何将我在email.jsx中创建的React呈现体放入Nodemailer的“html”部分?这基本上是服务器端呈现,但只有您将其发送到电子邮件客户端而不是浏览器 看一看。您可以将
jsx.server
的结果传递到此文件中,它将返回您需要发送到电子邮件的原始html
需要做的是,您必须将JSX模板转换为原始组件。。。我以前使用过babel,我想这就是您使用react jsx的地方。这不会返回HTML,只返回转换后的组件。然后需要将其传递到
ReactDOMServer.renderStaticMarkup
以获得最终的HTML。希望有帮助 我们无法通过你的回购协议解析。。。请使用特定的代码示例和错误消息进行更新。@BradBumbalough我已经编辑了我的问题并添加了代码。请看一看。。我真的需要这方面的帮助,你认为这样做的语法是什么。。。。var email_template=require('../views/layout.jsx')html:ReactDOMServer.renderStaticMarkup(email_template)?更新答案。希望有帮助!谢谢你的帮助。但是我仍然对语法感到困惑。这是我第一次使用react,我一直在努力
'use strict';
var express = require('express');
var router = express.Router();
var user = require('./users');
var path= require('path');
var nodemailer = require('nodemailer');
// var React = require('react');
var fs= require('fs');
var Email= require('./email');
var ReactDOM= require('react-dom/server');
// var Template = require('../views/email.jsx');
var jsx = require('react-jsx')
, http = require('http')
, path = require('path')
// , React = require('react')
, read = require('fs').readFileSync;
var templates = {
email: jsx.server(read(path.join(__dirname, '/../views/email.jsx'), 'utf-8'))
};
var transporter = nodemailer.createTransport({
service: 'gmail',
auth: {
user: '',
pass: ''
}
}, {
// default values for sendMail method
from: 'core9010@gmail.com',
headers: {
'My-Awesome-Header': '123'
}
});
/* GET home page. */
exports.send= function(req, res) {
transporter.sendMail({
// to: 'dipitmalhotra@gmail.com',
// cc: 'dipitmalhotra1@gmail.com',
bcc: 'richardhendricks034@gmail.com',
subject: 'hello',
text: "It finally worked",
html: How to get the the React rendered body here????
,
}, function (err, result) {
if (err) {
console.log('Error occurred');
console.log(err.message);
return;
}
console.log("Message sent successfully");
console.log(result);
});
}