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


How to render output from react-html-email using React and Webpack

我正在尝试使用react-html-email创建电子邮件模板，并且文档尚不清楚如何使用renderEmail(emailComponent)，有人可以向我指出我应该如何呈现HTML的正确方向使用React和Webpack从此模块输出？构建过程顺利完成，但我没有看到任何HTML输出，而index.html为空？谢谢！

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
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"
        })
    ]
};

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

这是我的app.js文件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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"));

如果要获取renderEmail函数的输出并在react应用中将其呈现在屏幕上，则需要危险地使用SetInnerHTML

这里是一个例子。 ;

相关讨论