React で IGV.js を実装する正しい方法

Question

React で IGV.js を使用しようとしていますが、次のコードでは 1 つではなく 2 つのコンテナ div が作成されることがわかりました。

var igvDiv = document.getElementById("igv-div");
var オプション =
{
    ゲノム: "hg38"、
    軌跡: "chr8:127,736,588-127,739,371",
    トラック: [
        {
            "名前": "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",
            "フォーマット": "詰め込み"
        }
    】
};

igv.createBrowser(igvDiv, オプション)
        .then(関数 (ブラウザ) {
            console.log("作成された IGV ブラウザ");
        })

私の React コードは us​​eRef を使用する方が適切です:

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

「igv」から igv をインポートします。

var igvStyle = {
  fontFamily: 'open sans,helveticaneue,helvetica neue,Helvetica,Arial,sans-serif',
    パディングトップ: '60px',
    余白: '5px'
  }
  class IGViewerSection extends コンポーネント {

    コンポーネントDidMount() {
      var igvContainer = document.getElementById('igv-div');
      var igvOptions = {
        ゲノム: "hg38"、
        軌跡: "chr8:127,736,588-127,739,371",
        トラック: [
            {
                "名前": "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",
                "フォーマット": "詰め込み"
            }
        】
    };
      戻り igv.createBrowser(igvContainer, igvOptions);
    }
  
    与える（） {
      戻る （
        <div id="igv-div" style={igvStyle}></div>
      );
    }
  }
  

デフォルトの IGViewerSection;

をエクスポートします。

正しいアプローチを使用して React に IGV.js を実装したいと考えています。 React で IGV.js を適切に実装する方法と、それを修正する方法を教えてください

Answer 1

こちらが正しいバージョンです。ref 属性を使用して ref オブジェクトをコンポーネントにアタッチすると、コンポーネントがマウントされたときに使用できるようになります。

リーリー