如何将完整的 html 页面调用到 React 组件中

Question

我创建了一个 html 文件，其中包含一个名为 BioCircos（代表基因组防御系统）的 R 包。 html 文件包含一个包含 Circos 图和脚本的标签，让用户可以在悬停模式下查看更多信息。我通过 Flask API 将文件发送到 React.js 组件，以便在应用程序上查看它。但是，我只能展示没有脚本的图片。我尝试了以下步骤：

将整个 html 页面发送到组件并危险地使用了 SetInnerHTML 或 InnerHTML.
发送部分 html 文件，仅包含 the 和 his parent 标签，以及两个相关脚本，此外，我还在应用程序的 head 标签中添加了 5 个相关脚本。我正在附加我们想要放入图片的反应组件，以及 link 中的 html 文件（这里太大了）。

Link 到 HTML 文件 - https://drive.google.com/file/d/1ZAcK3o-4Kwmw2NzsRohO9IqjFheYSwU-/view?usp=sharing

StrainCircos


    import React, {Component} from "react";
    import axios from "axios";
    import InnerHTML from 'dangerously-set-html-content'
    
    class CircosStrain extends Component {
        state = {
            file: null,
            loaded: false
        };
    
    
        componentDidMount() {
            axios
                .get(
                    "http://127.0.0.1:8801/api/v1/strains/strainCircos/" + this.props.svnn,
                )
                .then(response => {
                    this.setState({file: response.data});
                    this.setState({loaded: true})
                });
    
        }
    
        render() {
            // return (<iframe dangerouslySetInnerHTML={{ __html: this.state.file}}/>);
    
            return (
               // <div dangerouslySetInnerHTML={{ __html: this.state.file }}/>
               <InnerHTML html={this.state.file} />
            )
        }
    
    }
    
    export default CircosStrain;

Answer 1

可能 iframe 方法会更简单。

注释掉的 iframe 方法中的问题是尝试使用 innerHTML 属性设置 iframe 内容。如果要显示的内容可通过 URL 获得，如示例中所示，最简单的方法是设置 iframe src 属性。

<iframe src={"http://127.0.0.1:8801/api/v1/strains/strainCircos/" + this.props.svnn}/>

如果您不能使用 src 属性（例如，如果您想使用无法通过 URL 获得的内容，或者您需要在检索后修改内容），您可以也许使用 srcdoc 属性。

<iframe srcdoc={this.state.file}/>

或者，如果您需要支持不支持 srcdoc 属性的 Internet Explorer，您可以构造一个 data url.

如何将完整的 html 页面调用到 React 组件中

How to call a full html page into a React component

html

javascript

bioinformatics

reactjs

StrainCircos