Webpack:如何将原始HTML加载为React JSX?

艾伦·索扎(Alan Souza)

我正在使用Webpack和React JSX。我的应用程序中有一个部分,其中包含很多来自Designers的静态内容。他们通常向我发送一个HTML文件,其中包含我需要发布的内容。

目前,我正在手动将这些HTML转换为JSX(通过危险地设置HTML)。

问题:Webpack中是否有加载程序,可以自动将HTML文件转换为React JSX?

艾伦·索扎(Alan Souza)

请参考html-jsx-loader以使用Webpack自动将原始HTML转换为React JSX。

1-将html-jsx-loader添加到您的Webpack配置中:

{
    ...
    module: { 
        loaders: [
            { test: /\.htm$/, loader: 'jsx-loader!imports?React=react!html-jsx-loader'}
        ]},
        resolve: {
            extensions: ['', '.js', '.htm']
        }
    }
    ...
}

现在您可以编写原始HTML(例如Introduction.htm),并且webpack会自动将此文件的内容转换为React组件。

最后,您可以在JavaScript代码中引用此组件,如下所示:

var Introduction = require('./Introduction'); 

//Introduction is not HTML but ReactJS class.

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章