React中實作IGV.js的正確方法
P粉748218846
2023-09-01 11:50:19
<p>我正在嘗試在React中使用IGV.js,並發現以下程式碼建立了兩個容器div,而不是一個:</p>
<pre class="brush:php;toolbar:false;">var igvDiv = document.getElementById("igv-div");
var options =
{
genome: "hg38",
locus: "chr8:127,736,588-127,739,371",
tracks: [
{
"name": "HG00103",
"url": "https://s3.amazonaws.com/1000genomes/data/HG00103/alignment/HG00103.alt_bwamem_GRCh38DH.20150718.GBR.low_coverage.cram",
"indexURL": "https://s3.amazonaws.com/1000genomes/data/HG00103/alignment/HG00103.alt_bwamem_GRCh38DH.20150718.GBR.low_coverage.cram.crai",
"format": "cram"
}
]
};
igv.createBrowser(igvDiv, options)
.then(function (browser) {
console.log("Created IGV browser");
})</pre>
<p>我的React程式碼是使用useRef比較好:</p>
<pre class="brush:php;toolbar:false;">import React, { useRef, useEffect, Component } from 'react';
import igv from 'igv';
var igvStyle = {
fontFamily: 'open sans,helveticaneue,helvetica neue,Helvetica,Arial,sans-serif',
paddingTop: '60px',
margin: '5px'
}
class IGViewerSection extends Component {
componentDidMount() {
var igvContainer = document.getElementById('igv-div');
var igvOptions = {
genome: "hg38",
locus: "chr8:127,736,588-127,739,371",
tracks: [
{
"name": "HG00103",
"url": "https://s3.amazonaws.com/1000genomes/data/HG00103/alignment/HG00103.alt_bwamem_GRCh38DH.20150718.GBR.low_coverage.cram",
"indexURL": "https://s3.amazonaws.com/1000genomes/data/HG00103/alignment/HG00103.alt_bwamem_GRCh38DH.20150718.GBR.low_coverage.cram.crai",
"format": "cram"
}
]
};
return igv.createBrowser(igvContainer, igvOptions);
}
render() {
return (
<div id="igv-div" style={igvStyle}></div>
);
}
}
export default IGViewerSection;</pre>
<p>我想使用正確的方法在React中實作IGV.js。請您指導我如何正確地在React中實作IGV.js,以及如何修復</p>
這裡有正確的版本,你可以使用
ref
屬性將你的ref物件附加到元件上,並且在元件掛載時可以使用它。