react 引入html文件_react项目通过iframe方式引入html页面

主要实现：通过

import data from './data.html'; // 引入需要引用的html文件

class Data extends Component {

render() {

return (

);

}

}

export default withRouter(Data);

注意，因为这里的“data”是整个html文件中的代码并不是路径，所以在iframe中不能用src的方式，而要用srcDoc来代替，详细请百度iframe属性

出现问题：

You may need an appropriate loader to handle this file type.

|

|

|

可能在编译的过程中会出现如上问题，意思是需要合适的loader处理文件类型，在react项目中中没有解析html类型的loader，所以需要我们自己手动添加，解析html文件的loader为html-loader，加在webpack.config.dev.js中，

同时也要安装依赖如下，以下是方法：

npm i html-loader -S

{

test: /\.html$/,

use: [

{

loader: require.resolve('html-loader')

}

]

},

方法二： 可以不用装html-loader插件，通过把html静态文件转换成字符串，再通过export导出，主要步骤如下：

访问https://c.runoob.com/front-end/47 将html压缩，挤去掉换行符和空格；

新建html.js文件：

const html = "iframe

test";

export default html;

然后在需要引用的地方引用即可：

import html from './html.js'; // 引入需要引用的js文件

class Data extends Component {

render() {

return (

);

}

}

export default withRouter(Data);