将 HTML 文件中的 JS 实现到 reactJS 应用程序中

Question

我有一个反应应用程序，它使用相邻的 package 来开发一个 newick 字符串。 我还有一个包含 JS 的 HTML 文件，它可以使用 tnt.tree 可视化 newick 字符串。 我不知道如何将它直接实现到我的反应应用程序中。

反应代码以生成 newick 字符串：

import { RapidNeighborJoining } from "neighbor-joining";
var D_Matrix = [
    [0.0000000, 0.4965986, 0.50340136, 0.51020408, 0.50675676, 0.50675676],
    [0.4965986, 0.0000000, 0.11643836, 0.13698630, 0.13698630, 0.13698630],
    [0.5034014, 0.1164384, 0.00000000, 0.04794521, 0.04794521, 0.04794521],
    [0.5102041, 0.1369863, 0.04794521, 0.00000000, 0.00000000, 0.00000000],
    [0.5067568, 0.1369863, 0.04794521, 0.00000000, 0.00000000, 0.00000000],
    [0.5067568, 0.1369863, 0.04794521, 0.00000000, 0.00000000, 0.00000000],
];

var taxa = [
    {name: "Fish", genotype: "HB"},
    {name: "Rabbit", genotype: "HB"},
    {name: "Cat", genotype: "HB"},
    {name: "Human", genotype: "HB"},
    {name: "Bear", genotype: "HB"},
    {name: "Shark", genotype: "HB"}
];

// Distance matrix and taxonomy data used to create newick string
var RNJ = new RapidNeighborJoining(D_Matrix, taxa);
RNJ.run();
var treeNewick = RNJ.getAsNewick();

HTML/JS 可视化生成的 newick 字符串：

<head>
    <link rel="stylesheet" href="https://tntvis.github.io/tnt.tree/build/tnt.tree.css" type="text/css" />
    <script src="https://d3js.org/d3.v3.min.js"></script>
    <script src="https://tntvis.github.io/tnt.tree/build/tnt.tree.min.js"></script>
</head>

<body>
    <div id="mydiv"></div>
    <script>
    var newick = "NEWICK STRING FROM REACT APP PASTED HERE";
    var tree = tnt.tree();
    tree
        .data(tnt.tree.parse_newick(newick))
        .node_display(tree.node_display()
            .size(4)
            .fill("#888888")
        )
        .label (tnt.tree.label.text()
            .fontsize(12)
            .height(24)
        )
        .layout(tnt.tree.layout.vertical()
            .width(650)
            .scale(false)
        );
    tree(document.getElementById("mydiv"));
    </script>
</body>

我试着把它放在我的应用程序 class 的渲染部分中，但它只是加载一个空白页：

class App extends React.Component {
    render() {
        return (
            <div>
                HTML PASTED HERE
            </div>
        );
    }    
}

export default App;

Answer 1

你应该 append 节点到你的 React 树的 componentDidMount：

constructor() {
    super();
    this.containerRef = React.createRef();
}

componentDidMount() {
    this.containerRef.appendChild(tree);
}


render() {
    return <div ref={this.containerRef}/>
}

将 HTML 文件中的 JS 实现到 reactJS 应用程序中

问题描述

1 个解决方案

解决方案1
0 2020-12-16 17:02:35

将 HTML 文件中的 JS 实现到 reactJS 应用程序中

问题描述

1 个解决方案

解决方案1 0 2020-12-16 17:02:35

解决方案1
0 2020-12-16 17:02:35