当前位置：首页 > React

react如何调用js

2026-02-11 16:45:05React

调用 JavaScript 函数

在 React 中直接调用 JavaScript 函数可以通过以下方式实现。将函数定义在组件外部或单独的文件中，通过 import 引入后直接调用。

// utils.js
export function greet(name) {
  return `Hello, ${name}!`;
}

// React 组件
import { greet } from './utils';

function App() {
  const message = greet('World');
  return <div>{message}</div>;
}

使用 `eval`（谨慎使用）

动态执行字符串形式的 JavaScript 代码可通过 eval，但需注意安全风险（如 XSS 攻击）。

function DangerousComponent() {
  const code = 'console.log("This is eval")';
  useEffect(() => {
    eval(code); // 仅在可信内容中使用
  }, []);
  return null;
}

动态加载外部脚本

通过 script 标签或 import() 动态加载第三方 JavaScript 文件。

useEffect(() => {
  const script = document.createElement('script');
  script.src = 'https://example.com/external.js';
  script.async = true;
  document.body.appendChild(script);

  return () => {
    document.body.removeChild(script);
  };
}, []);

使用 `window` 对象

全局函数或库挂载到 window 后，可直接通过 window 调用。

// 外部脚本定义
window.myLib = { showAlert: () => alert('Loaded!') };

// React 组件
function AlertComponent() {
  useEffect(() => {
    window.myLib?.showAlert();
  }, []);
  return null;
}

通过 `dangerouslySetInnerHTML` 注入

渲染包含 JavaScript 的 HTML 字符串时使用此方法，但需严格过滤内容。

function HTMLInjection() {
  const html = '<button onclick="alert(\'Clicked\')">Click</button>';
  return <div dangerouslySetInnerHTML={{ __html: html }} />;
}