Der richtige Weg, IGV.js in React zu implementieren

Question

Ich versuche, IGV.js in React zu verwenden und habe festgestellt, dass der folgende Code zwei Container-Divs anstelle von einem erstellt:

var igvDiv = document.getElementById("igv-div");
var-Optionen =
{
    Genom: „hg38“,
    Ort: „chr8:127,736,588-127,739,371“,
    Spuren: [
        {
            „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“: „stopfen“
        }
    ]
};

igv.createBrowser(igvDiv, Optionen)
        .then(Funktion (Browser) {
            console.log("IGV-Browser erstellt");
        })

Mein React-Code funktioniert besser mit useRef:

import React, { useRef, useEffect, Component } from 'react';

igv aus 'igv' importieren;

var igvStyle = {
  Schriftfamilie: 'open sans,helveticaneue,helvetica neue,Helvetica,Arial,sans-serif',
    paddingTop: '60px',
    Rand: '5px'
  }
  Klasse IGViewerSection erweitert Component {

    ComponentDidMount() {
      var igvContainer = document.getElementById('igv-div');
      var igvOptions = {
        Genom: „hg38“,
        Ort: „chr8:127,736,588-127,739,371“,
        Spuren: [
            {
                „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“: „stopfen“
            }
        ]
    };
      return igv.createBrowser(igvContainer, igvOptions);
    }
  
    render() {
      zurückkehren (
        <div id="igv-div" style={igvStyle}></div>
      );
    }
  }
  

Standard-IGViewerSection exportieren;

Ich möchte IGV.js in React mit dem richtigen Ansatz implementieren. Könnten Sie mir bitte zeigen, wie ich IGV.js in React richtig implementiert und wie ich das Problem beheben kann

Answer 1

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