Question

我尝试使用react-html-email来创建电子邮件模板，并且文档不清楚如何使用renderEmail（emailComponent），任何人都可以指出我正确的方向我如何使用＃39} ;我应该使用React和Webpack从这个模块渲染HTML输出？构建过程完成没有错误，但我没有看到任何HTML输出和index.html是空白的？谢谢！

这是我的电子邮件组件，用于呈现电子邮件模板：

import React from 'react'
import {Email, Item, A} from 'react-html-email'

const BasicEmail = () => (

  <Email title='Basic Email'>
    <Item>
      <A href="#" style={{paddingLeft: 10}}>Hello World!</A>
    </Item>
  </Email>

);

export default BasicEmail;

这是我的Webpack配置：

const path = require("path");
const HtmlWebPackPlugin = require("html-webpack-plugin");
module.exports = {
    entry: ["./src/js/app.js"],
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "js/[name].js"
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                }
            },
            {
                test: /\.html$/,
                use: [
                    {
                        loader: "html-loader"
                    }
                ]
            }
        ]
    },
    plugins: [
        new HtmlWebPackPlugin({
            template: "./src/index.html",
            filename: "./index.html"
        })
    ]
};

Answer 1

如果您想获取renderEmail功能的输出并在反应应用中将其呈现在屏幕上，则需要使用dangerouslySetInnerHTML

这是一个例子。 <div dangerouslySetInnerHTML={{__html: emailHTML }} />;

Answer 2

我能够通过在app.js中的render（）内添加renderEmail（）来解决这个问题...运行Webpack将代码编译为XHTML 1.0 Strict格式然后将其发送到index.html

这是我的app.js文件：

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import {renderEmail} from 'react-html-email';
import BasicEmail from './../components/basicEmail'

class App extends Component {
  constructor() {
    super();
    this.state = {
      value: ""
    };
  }

  render() {
    return (
      renderEmail(<BasicEmail />)
    );
  }
}

export default App;

ReactDOM.render(<App/>, document.getElementById("root"));

如何使用React和Webpack

2 个答案: