React中實作IGV.js的正確方法
P粉748218846
P粉748218846 2023-09-01 11:50:19
0
1
509
<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>
P粉748218846
P粉748218846

全部回覆(1)
P粉410239819

這裡有正確的版本,你可以使用ref屬性將你的ref物件附加到元件上,並且在元件掛載時可以使用它。

import React, { createRef, Component } from 'react';
import igv from 'igv';

const igvStyle = {
  fontFamily: 'open sans,helveticaneue,helvetica neue,Helvetica,Arial,sans-serif',
  paddingTop: '60px',
  margin: '5px'
}

class IGViewerSection extends Component {
  constructor(props) {
    super(props)
    this.container = createRef(null)
  }

  componentDidMount() {
    const 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(this.container.current, igvOptions);
  }

  render() {
    return (
      <div id="igv-div" ref={this.container} style={igvStyle}></div>
    );
  }
}
  

export default IGViewerSection;
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板