react如何执行script
在React中执行Script的方法
动态创建Script标签
通过JavaScript动态创建<script>标签并插入到DOM中。这种方法适用于需要动态加载外部脚本的场景。
const script = document.createElement('script');
script.src = 'https://example.com/script.js';
script.async = true;
document.body.appendChild(script);使用dangerouslySetInnerHTML
在React组件中直接插入包含<script>标签的HTML字符串。需要注意安全风险，仅用于可信内容。
<div dangerouslySetInnerHTML={{ __html: '<script>console.log("executed")</script>' }} />通过useEffect钩子
在React函数组件中，使用useEffect钩子来执行脚本代码。适合组件挂载后需要执行的逻辑。
useEffect(() => {
const script = document.createElement('script');
script.src = 'https://example.com/script.js';
document.body.appendChild(script);
return () => {
document.body.removeChild(script);
};
}, []);使用第三方库
像react-helmet这样的库可以方便地在React应用中管理<head>内容，包括脚本的加载。
import { Helmet } from 'react-helmet';
<Helmet>
<script src="https://example.com/script.js" />
</Helmet>内联脚本执行
直接在React组件中编写JavaScript代码，会在组件渲染时执行。适用于简单的逻辑。
function MyComponent() {
console.log('This will execute on render');
return <div>Content</div>;
}注意事项
- 动态加载脚本时考虑脚本的依赖关系和执行顺序
- 避免XSS攻击风险，特别是使用
dangerouslySetInnerHTML时 - 对于第三方脚本，考虑使用
async或defer属性控制加载行为 - 在组件卸载时清理脚本资源，防止内存泄漏
