如何通过外部JavaScript调用ReactJS文件中定义的函数？

这个需求很常见——当你需要在React封装的代码和页面原生脚本之间打通交互时，核心问题是React模块的作用域隔离：默认情况下，React文件里定义的函数只在它自己的模块作用域内可见，页面上的全局<script>访问不到。下面给你两种实用的实现方案：

方案一：将函数挂载到全局window对象 #

这是最简单直接的方式，把React里的函数暴露到浏览器的全局作用域中：

步骤1：在React的index.js中暴露函数 #

修改你的index.js代码，把testfunction赋值给window对象的属性（建议用自定义命名空间避免全局污染）：

// index.js
function testfunction(){ 
  console.log("this is test function written in reactjs") 
}

// 用自定义命名空间管理暴露的函数，避免全局变量冲突
window.MyReactApp = window.MyReactApp || {};
window.MyReactApp.testfunction = testfunction;

// 你的React渲染代码（示例）
import ReactDOM from 'react-dom/client';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<div>React App</div>);

步骤2：在外部script中调用 #

现在你可以在页面的<script>里直接调用这个全局函数了，注意要确保React代码加载完成后再执行：

<html>
<body>
  <div id="root"></div>
  <!-- 先加载React核心脚本 -->
  <script src="reactjs.min.js"></script>
  <script src="react-dom.min.js"></script>
  <!-- 加载你的React打包后的业务代码 -->
  <script src="bundle.js"></script>
  
  <script>
    // 等待DOM和脚本完全加载后调用
    window.addEventListener('DOMContentLoaded', () => {
      window.MyReactApp.testfunction();
    });
  </script>
</body>
</html>

方案二：使用自定义事件（无全局污染） #

如果不想污染全局作用域，推荐用浏览器的自定义事件API来实现无耦合的通信：

步骤1：在React中监听自定义事件 #

在React组件里添加事件监听，当收到自定义事件时执行testfunction：

// index.js
import { useEffect } from 'react';
import ReactDOM from 'react-dom/client';

function testfunction(){ 
  console.log("this is test function written in reactjs") 
}

function App() {
  useEffect(() => {
    // 定义事件处理逻辑
    const handleCallTest = () => {
      testfunction();
    };
    
    // 监听自定义事件
    window.addEventListener('call-react-test-function', handleCallTest);
    
    // 组件卸载时清理监听，避免内存泄漏
    return () => {
      window.removeEventListener('call-react-test-function', handleCallTest);
    };
  }, []);

  return <div>React App</div>;
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

步骤2：在外部script中触发事件 #

通过dispatchEvent触发自定义事件，间接调用React里的函数：

<html>
<body>
  <div id="root"></div>
  <script src="reactjs.min.js"></script>
  <script src="react-dom.min.js"></script>
  <script src="bundle.js"></script>
  
  <script>
    // 触发自定义事件，触发React中的函数执行
    window.dispatchEvent(new CustomEvent('call-react-test-function'));
  </script>
</body>
</html>

这种方式更优雅，不会污染全局变量，适合中大型项目使用。

额外注意事项 #

• 确保React的脚本（包括你的业务代码）在外部script之前加载，否则调用时函数还未定义。
• 如果使用Create React App等脚手架，打包后的代码会自动处理模块作用域，只需按上面的方式暴露函数即可。

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