react如何执行script
在React中执行JavaScript脚本
React应用通常通过组件化的方式组织代码，直接执行外部脚本需要特殊处理。以下是几种常见方法：
使用dangerouslySetInnerHTML
这种方法允许直接注入包含脚本的HTML字符串，但需谨慎使用以避免XSS攻击：
function MyComponent() {
const htmlWithScript = '<script>console.log("Script executed")</script>';
return <div dangerouslySetInnerHTML={{ __html: htmlWithScript }} />;
}通过useEffect动态加载脚本
在组件挂载后动态创建和插入script标签是更安全的方式：
import { useEffect } from 'react';
function ScriptLoader() {
useEffect(() => {
const script = document.createElement('script');
script.src = "path/to/your/script.js";
script.async = true;
document.body.appendChild(script);
return () => {
document.body.removeChild(script);
};
}, []);
return <div>Loading script...</div>;
}使用第三方库
像react-helmet这样的库可以方便地管理头部元素和脚本：
import { Helmet } from 'react-helmet';
function MyComponent() {
return (
<div>
<Helmet>
<script src="path/to/script.js" />
<script>{`console.log('Inline script executed')`}</script>
</Helmet>
</div>
);
}直接调用全局函数
如果脚本已通过其他方式加载，可以直接在React组件中调用其函数：
function MyComponent() {
const handleClick = () => {
window.globalFunctionFromScript();
};
return <button onClick={handleClick}>Call Script Function</button>;
}注意事项
- 避免在React中频繁操作DOM，优先考虑React的状态管理机制
- 外部脚本可能影响React的虚拟DOM性能
- 确保脚本加载顺序正确，特别是存在依赖关系时
- 考虑使用React的代码分割功能替代外部脚本
