React에서 IGV.js를 구현하는 올바른 방법

Question

React에서 IGV.js를 사용하려고 하는데 다음 코드가 하나가 아닌 두 개의 컨테이너 div를 생성하는 것을 발견했습니다.

var igvDiv = document.getElementById("igv-div");
변수 옵션 =
{
    게놈: "hg38",
    위치: "chr8:127,736,588-127,739,371",
    트랙: [
        {
            "이름": "HG00103",
            "url": "https://s3.amazonaws.com/1000genomes/data/HG00103/alignment/HG00103.alt_bgamem_GRCh38DH.20150718.GBR.low_coverage.cram",
            "indexURL": "https://s3.amazonaws.com/1000genomes/data/HG00103/alignment/HG00103.alt_bgamem_GRCh38DH.20150718.GBR.low_coverage.cram.crai",
            "format": "벼락치기"
        }
    ]
};

igv.createBrowser(igvDiv, 옵션)
        .then(함수(브라우저) {
            console.log("IGV 브라우저 생성됨");
        })

내 React 코드는 useRef:

를 사용하는 것이 더 좋습니다.

'react'에서 React, { useRef, useEffect, Component } 가져오기;

'igv'에서 igv를 가져옵니다.

var igvStyle = {
  글꼴 계열: 'open sans,helveticaneue,helvetica neue,Helvetica,Arial,sans-serif',
    paddingTop: '60px',
    여백: '5px'
  }
  클래스 IGViewerSection은 구성 요소를 확장합니다.

    컴포넌트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_bgamem_GRCh38DH.20150718.GBR.low_coverage.cram",
                "indexURL": "https://s3.amazonaws.com/1000genomes/data/HG00103/alignment/HG00103.alt_bgamem_GRCh38DH.20150718.GBR.low_coverage.cram.crai",
                "format": "벼락치기"
            }
        ]
    };
      return igv.createBrowser(igvContainer, igvOptions);
    }
  
    렌더링() {
      반품 (
        <div id="igv-div" style={igvStyle}></div>
      );
    }
  }
  

기본 IGViewerSection 내보내기;

올바른 접근 방식을 사용하여 React에서 IGV.js를 구현하고 싶습니다. React에서 IGV.js를 올바르게 구현하는 방법과 이를 수정하는 방법을 안내해 주실 수 있나요

Answer 1

올바른 버전은 다음과 같습니다. ref 속성을 사용하여 참조 개체를 구성 요소에 연결할 수 있으며 구성 요소가 마운트될 때 사용할 수 있습니다.

으아악