La bonne façon d'implémenter IGV.js dans React

Question

J'essaie d'utiliser IGV.js dans React et j'ai découvert que le code suivant crée deux div de conteneur au lieu d'un :

var igvDiv = document.getElementById("igv-div");
options variables =
{
    génome : "hg38",
    lieu : "chr8 : 127 736 588-127 739 371 »,
    des pistes: [
        {
            "nom": "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": "cramer"
        }
    ]
} ;

igv.createBrowser(igvDiv, options)
        .then(fonction (navigateur) {
            console.log("Navigateur IGV créé");
        })</pré>
<p>Mon code React est meilleur en utilisant useRef : </p>
<pre class="brush:php;toolbar:false;">import React, { useRef, useEffect, Component } from 'react';

importer igv depuis 'igv' ;

varStyleigv = {
  fontFamily : 'open sans,helveticaneue,helvetica neue,Helvetica,Arial,sans-serif',
    paddingTop : '60px',
    marge : '5px'
  }
  la classe IGViewerSection étend le composant {

    composantDidMount() {
      var igvContainer = document.getElementById('igv-div');
      var igvOptions = {
        génome : "hg38",
        lieu : "chr8 : 127 736 588-127 739 371 »,
        des pistes: [
            {
                "nom": "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": "cramer"
            }
        ]
    } ;
      return igv.createBrowser(igvContainer, igvOptions);
    }
  
    rendre() {
      retour (
        <div id="igv-div" style={igvStyle}></div>
      );
    }
  }
  

exporter la IGViewerSection par défaut;

Je souhaite implémenter IGV.js dans React en utilisant la bonne approche. Pourriez-vous s'il vous plaît me guider sur la façon d'implémenter correctement IGV.js dans React et comment le réparer

Answer 1

Voici la version correcte, vous pouvez utiliser l'attribut ref pour attacher votre objet ref au composant et il sera disponible lorsque le composant sera monté.

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;