javascript - Dış betikten React DOM Öğesine Erişme

Dış bir script dosyasından bir React DOM elemanı 'id'sine erişmeye çalışıyorum. Scriptimin doğru şekilde import edildiğine inanıyorum çünkü dosyadan console.log('test') çalışıyor, ancak console.log(myDiv) null döndürüyor.

Bunu React'te nasıl başarabilirim?

// BİLEŞEN

import './../data/script.ts';

  render() {
    return (
        <div id='targetDiv'>
          <p>{This will be populated from my external script file...}</p>
        </div>
    );
  }

// SCRIPT

  var myDiv = document.getElementById('targetDiv');
  console.log(myDiv);

Cevap #1

Sorunu çözmek için harici betiğimi bir fonksiyon olarak içe aktarmam ve ardından bileşen yüklendikten sonra fonksiyonu çağırmam gerekiyordu:

// BİLEŞEN

import { myScript } from './../data/script';

  componentDidMount() {
    {
      myScript();
    }
  }

  render() {
    return (
        <div id='targetDiv'>
          {My script now renders correctly inside the div}
        </div>
    );
  }

// SCRIPT

  var myDiv = document.getElementById('targetDiv');
  const d = document.createElement('p');
  myDiv.appendChild(d);