首页  >  问答  >  正文

React中实现IGV.js的正确方法

<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粉748218846P粉748218846435 天前486

全部回复(1)我来回复

  • P粉410239819

    P粉4102398192023-09-02 10:50:35

    这里是正确的版本,你可以使用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;

    回复
    0
  • 取消回复