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

Question

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

1. 将整个 html 页面发送到组件并危险地使用 SetInnerHTML 或 InnerHTML。
2. 发送部分 html 文件，其中仅包含 和他的父标签，以及两个相关脚本，此外，我已将另外 5 个相关脚本放在应用程序的头标签中。 我正在附加我们要放入图片的反应组件，以及链接中的 html 文件（这里太大了）。

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

应变Circos

    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，您可以构造一个数据 url 。

Answer 2

利用

npm install node-html-parser