主要实现:通过<iframe>方式引入,以下是核心代码部分:
import data from './data.html'; // 引入需要引用的html文件
class Data extends Component {
render() {
return (
<iframe
title="resg"
srcDoc={data}
style={{ width: '100%', border: '0px', height: '1100px' }}
sandbox="allow-same-origin allow-scripts allow-popups allow-forms"
scrolling="auto"
/>
);
}
}
export default withRouter(Data);
注意,因为这里的“data”是整个html文件中的代码并不是路径,所以在iframe中不能用src的方式,而要用srcDoc来代替,详细请百度iframe属性
出现问题:
You may need an appropriate loader to handle this file type.
| <!DOCTYPE html>
| <html lang="en">
| <head>
可能在编译的过程中会出现如上问题,意思是需要合适的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 = "<!DOCTYPE html><html><head><meta charset="utf-8"><title>iframe</title></head><body><h1>test</h1></body></html>";
export default html;
然后在需要引用的地方引用即可:
import html from './html.js'; // 引入需要引用的js文件
class Data extends Component {
render() {
return (
<iframe
title="resg"
srcDoc={html}
style={{ width: '100%', border: '0px', height: '1100px' }}
sandbox="allow-same-origin allow-scripts allow-popups allow-forms"
scrolling="auto"
/>
);
}
}
export default withRouter(Data);