從外部腳本訪問React DOM Element

Question

我試圖從外部腳本文件訪問React DOM元素'id'。 我相信我的腳本正在被正確導入，因為來自文件的console.log（'test'）正在運行，盡管console.log（myDiv）返回null。

我怎樣才能在React中實現這一目標？

// 零件

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);

Answer 1

要解決此問題，我需要將外部腳本作為函數導入，然后在安裝組件后調用該函數：

// 零件

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);