Question

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

Thisis email.jsx。我使用react js来构建电子邮件的主体，并使用实体页眉和页脚。 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="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发送电子邮件。在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: '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。希望有所帮助！

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

1 个答案: