从外部脚本访问 React DOM 元素答案

【问题标题】：Access React DOM Element from external script从外部脚本访问 React DOM 元素
【发布时间】：2019-09-12 04:52:16
【问题描述】：

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

// 脚本

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

【问题讨论】：

你的脚本可能运行得太早了，console.log 在目标 dom 挂载之前。
@hackape 你说得对，谢谢。该脚本在我的元素安装之前执行，因此返回 null，我在下面发布了我的解决方案。

标签： javascript reactjs typescript

【解决方案1】：

为了解决这个问题，我需要将外部脚本作为函数导入，然后在组件挂载后调用该函数：

// 组件

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

【讨论】：