react如何执行script
在React中执行Script的方法
使用useEffect钩子加载外部脚本
在React组件中，可以通过useEffect钩子动态加载并执行外部脚本。这种方式适用于需要按需加载的第三方库或广告脚本。
import React, { useEffect } from 'react';
function MyComponent() {
useEffect(() => {
const script = document.createElement('script');
script.src = "https://example.com/script.js";
script.async = true;
document.body.appendChild(script);
return () => {
document.body.removeChild(script);
};
}, []);
return <div>组件内容</div>;
}直接注入HTML字符串并执行脚本
当需要渲染包含脚本的HTML字符串时，可以使用dangerouslySetInnerHTML属性，但需注意XSS风险。
function InjectedScript() {
const htmlWithScript = `
<div>
<script>
console.log('脚本已执行');
</script>
</div>
`;
return <div dangerouslySetInnerHTML={{ __html: htmlWithScript }} />;
}使用react-helmet管理头部脚本
对于需要插入到<head>的脚本（如统计分析代码），可以使用react-helmet库。
import { Helmet } from 'react-helmet';
function HeadScript() {
return (
<Helmet>
<script src="https://analytics.example.com/tracker.js" />
</Helmet>
);
}动态执行内联脚本
通过useEffect配合eval执行字符串形式的脚本代码（需谨慎使用）。
useEffect(() => {
const scriptCode = `console.log('动态执行的脚本')`;
new Function(scriptCode)();
}, []);注意事项
- 避免直接在组件中写入
<script>标签，React的虚拟DOM会忽略这些标签 - 第三方脚本加载建议添加
async或defer属性防止阻塞 - 移除脚本时需清理事件监听器防止内存泄漏
- 考虑使用自定义钩子封装脚本加载逻辑提高复用性
对于需要与React交互的脚本，建议使用window对象作为桥梁：
useEffect(() => {
window.handleScriptEvent = (data) => {
// 处理脚本回调
};
}, []);
