在 React 组件中设置外部 HTML

Question

我正在开发一个网站，我想将外部 HTML 嵌入到我的网页中。所以我尝试了以下使用 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;

我还使用了另一种实现内部的方法HTML:

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;

但结果是这样的：有谁知道如何解决这一问题？谢谢！

Answer 1

style写错了，style必须是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;

在 React 组件中设置外部 HTML

Setting external HTML in react components

html

javascript

innerhtml

reactjs

dangerouslysetinnerhtml