当前位置：首页 > React

react如何调用js

2026-03-30 19:42:58React

调用 JavaScript 方法

在 React 中调用 JavaScript 方法可以通过多种方式实现，具体取决于使用场景和需求。以下是几种常见的方法：

直接调用全局函数

如果 JavaScript 方法是全局定义的，可以直接在 React 组件中调用。确保全局函数在组件渲染前已定义。

// 全局定义
window.myGlobalFunction = () => {
  console.log('Global function called');
};

// React 组件中调用
function MyComponent() {
  return <button onClick={() => window.myGlobalFunction()}>Call Global Function</button>;
}

导入外部 JavaScript 文件

react如何调用js

通过 import 语句导入外部 JavaScript 文件中的函数或模块。

// utils.js
export const myUtilityFunction = () => {
  console.log('Utility function called');
};

// React 组件中导入并调用
import { myUtilityFunction } from './utils';

function MyComponent() {
  return <button onClick={myUtilityFunction}>Call Utility Function</button>;
}

使用 useEffect 调用

在生命周期或副作用钩子中调用 JavaScript 方法，适用于需要在组件挂载或更新时执行的操作。

react如何调用js

import { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    console.log('Component mounted or updated');
  }, []);

  return <div>Check console for logs</div>;
}

动态加载脚本

通过动态创建 <script> 标签加载外部 JavaScript 文件并调用其中的方法。

function loadScript(src, callback) {
  const script = document.createElement('script');
  script.src = src;
  script.onload = callback;
  document.body.appendChild(script);
}

function MyComponent() {
  const handleClick = () => {
    loadScript('path/to/external.js', () => {
      window.externalFunction(); // 调用加载脚本中的函数
    });
  };

  return <button onClick={handleClick}>Load and Call Script</button>;
}

注意事项