react如何调用js
调用 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 }} />;
}注意事项
- 避免直接执行用户输入的代码，防止安全漏洞。
- 动态加载脚本时考虑资源依赖和加载顺序。
- 优先使用模块化导入而非全局变量。
