如何使用 React 和 Webpack 渲染 react-html-email 的输出

Question

我正在尝试使用 react-html-email 来创建电子邮件模板，但文档不清楚如何使用 renderEmail(emailComponent) 谁能指出我应该如何使用 React 和 Webpack 渲染此模块的 HTML 输出的正确方向？构建过程完成没有错误，但我没有看到任何 HTML 输出和索引.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

我能够通过在应用程序中的render()中添加renderEmail()来解决此问题.js...运行 Webpack 将代码编译为 XHTML 1.0 严格格式，然后将其发送到索引.html

这是我的应用程序.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"));

Answer 2

如果你想获取renderEmail函数的输出并在反应应用程序中将其呈现在屏幕上，你需要使用危险的SetInnerHTML

下面是一个示例。<div dangerouslySetInnerHTML={{__html: emailHTML }} />;