Javascript 从外部脚本访问React DOM元素

我正在尝试从外部脚本文件访问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>
    );
  }

---

要解决此问题，我需要将外部脚本作为函数导入，然后在安装组件后调用该函数：

//组成部分

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

  componentDidMount() {
    {
      myScript();
    }
  }

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

---

在装载目标dom之前，您的脚本可能运行得太早，即console.log。@hackape您是正确的，谢谢。脚本在我的元素装入之前执行，因此返回null，我在下面发布了我的解决方案。

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

  componentDidMount() {
    {
      myScript();
    }
  }

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

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