如何在React的JSX文件中访问外部script脚本内的对象

1. HTML文件引入脚本 #

直接在你的React项目入口HTML文件（通常是public/index.html）的<body>标签末尾引入目标脚本，这样脚本加载完成后会自动将TheObjectThatINeedToAccessFromScript挂载到全局window对象上：

<!-- public/index.html 中body标签末尾添加 -->
<script src="url-to-some-script"></script>

如果你的脚本不需要在页面初始化时就加载，也可以后续在React组件中动态创建script标签加载，按需引入即可。

2. React组件中放置对应DOM #

直接把需要的DOM结构写在对应的React组件内即可，推荐搭配useRef获取DOM实例，避免固定ID重复的问题：

import { useRef, useEffect } from 'react';

const TargetComponent = () => {
  const targetDomRef = useRef(null);

  useEffect(() => {
    // 后续初始化逻辑写在这里
  }, []);

  return (
    <div id="an-id-wrapper">
      <div ref={targetDomRef} id="an-id"></div>
    </div>
  )
}

export default TargetComponent;

3. 全局对象的访问与引入 #

因为脚本挂载的对象在window上，你可以直接通过window.TheObjectThatINeedToAccessFromScript访问。如果想要实现import引入的使用形式，单独写一个导出文件即可：
首先新建文件src/utils/externalScript.js：

// 从全局window上取出目标对象导出
const TheObjectThatINeedToAccessFromScript = window.TheObjectThatINeedToAccessFromScript;
export default TheObjectThatINeedToAccessFromScript;

之后就可以在任意组件中像你期望的那样引入使用：

import TheObjectThatINeedToAccessFromScript from 'src/utils/externalScript.js';

// 组件内调用注意要等脚本加载完成，比如在useEffect中判断
useEffect(() => {
  if (TheObjectThatINeedToAccessFromScript) {
    const settings = { config: "some-config", id: "an-id" };
    TheObjectThatINeedToAccessFromScript.initialize(settings);
  }
}, []);

注意事项 #

• 确保调用initialize方法时，外部脚本已经加载完成，否则会出现对象未定义的报错。如果脚本加载慢，可以给HTML中的script标签添加onload事件回调，或者在调用前增加对象存在性判断。
• 如果使用TypeScript开发，可以在全局类型声明文件中添加该对象的类型定义，避免类型报错。

内容的提问来源于stack exchange，提问作者RMT