[英]Setting external HTML in react components
I am working on a website that I want to embed an external HTML to my web page.我正在一个网站上工作,我想将外部 HTML 嵌入到我的网页中。 So I tried the following ways using iframe but it only shows me a blank page with no content所以我使用 iframe 尝试了以下方法,但它只显示一个没有内容的空白页面
import React from 'react';
function MapVisualization(props) {
return(
<div>
<iframe src="https://voyagerwsh.shinyapps.io/USMapWithCountyPolygon/?_ga=2.183050790.160516643.1596758294-1394498961.1595634152" style="border: none; width: 1\
00%; height: 850px" frameborder="0"></iframe>
</div>
);
}
export default MapVisualization;
I also used another way of implementing innerHTML:我还使用了另一种实现innerHTML的方式:
import React from 'react';
function MapVisualization(prop) {
return(
<div dangerouslySetInnerHTML = {{ __html: 'https://voyagerwsh.shinyapps.io/USMapWithCountyPolygon/?_ga=2.183050790.160516643.1596758294-1394498961.1595634152'}} />
);
}
export default MapVisualization;
But the result looks like this:但结果是这样的: Does anyone know how to fix this?有谁知道如何解决这一问题? Thanks!谢谢!
style was written by wrong way, style must be object样式写错了,样式必须是对象
import React from 'react';
function MapVisualization(props) {
return(
<div>
<iframe src="https://voyagerwsh.shinyapps.io/USMapWithCountyPolygon/?_ga=2.183050790.160516643.1596758294-1394498961.1595634152"
style={{ border: 'none',
width: '100%',
height: 850,
frameborder:0}}>
</iframe>
</div>
);
}
export default MapVisualization;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.