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

Question

我正在使用 React 和 Node js 创建一个电子邮件发送应用程序。我正在使用 Nodemailer 发送电子邮件。为了在电子邮件正文中获得丰富的 HTML 和 CSS，我使用 React js 来构建电子邮件正文。因此，一旦正文由 React js 呈现，就可以通过 Nodemailer 以 html 的形式发送。 到目前为止，我已经能够将 Nodemailer 设置为处理简单的文本、附件。我在 email.jsx 中构建了电子邮件正文（带有响应式 HTML）。我已经放置了一个路由（'/send'）来查看它在服务器端的实际外观。 我面临的问题是如何编译我创建的这个 .jsx 模板并使用 Nodemailer 将其作为 html 发送。我知道如果它是一个 .hjs 文件，我们肯定可以使用 Hogan 来做到这一点。但是我怎样才能为 .jsx 文件实现相同的效果。由于我是 React js 的新手，请多多包涵。

这是 email.jsx。我已经使用 react js 来构造带有具体化页眉和页脚的电子邮件正文。 电子邮件.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="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;

这是 Mail.js。在这段代码中，我使用 nodemailer 发送电子邮件。 邮件.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: '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);

});
}

那么，我怎样才能将我在 email.jsx 中创建的 React 渲染正文放入 Nodemailer 的“html”部分？

Answer 1

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

看看ReactDOMServer.renderStaticMarkup。您可以将 jsx.server 的结果传递给它，它会返回您需要发送到电子邮件的原始 html。

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