当前位置：首页 > React

react 如何引用script

2026-03-31 05:21:30React

在React中引用外部Script的方法

直接通过`public/index.html`引入

将Script标签直接添加到public/index.html文件的<head>或<body>中。适用于全局依赖的库（如jQuery、Google Analytics）。

<!-- 示例：引入jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

使用`useEffect`动态加载Script

在组件中通过useEffect动态创建Script标签，适用于按需加载的脚本。

import React, { useEffect } from 'react';

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

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

  return <div>组件内容</div>;
}

使用`react-helmet`管理Script标签

通过react-helmet库可以更灵活地管理头部标签（包括Script），适用于需要动态控制脚本的场景。

import React from 'react';
import { Helmet } from 'react-helmet';

function MyComponent() {
  return (
    <div>
      <Helmet>
        <script src="https://example.com/your-script.js" />
      </Helmet>
      <div>组件内容</div>
    </div>
  );
}

通过npm安装并导入

如果脚本已发布为npm包，可直接安装后通过import引入。

npm install your-package

import 'your-package';

注意事项

脚本加载顺序：确保依赖脚本按正确顺序加载（如jQuery需在插件之前）。
重复加载问题：动态加载时需避免重复插入相同脚本。
TypeScript支持：若使用TypeScript，可能需要为第三方脚本声明类型（通过declare或@types包）。

示例：动态加载并回调

若需在脚本加载完成后执行逻辑，可通过onload事件处理。

react 如何引用script

useEffect(() => {
  const script = document.createElement('script');
  script.src = 'https://example.com/your-script.js';
  script.onload = () => {
    console.log('脚本加载完成');
    // 初始化逻辑
  };
  document.body.appendChild(script);
}, []);