当前位置：首页 > React

react 如何引用script

2026-02-12 02:13:09React

在React中引用外部Script的方法

方法1：直接在public/index.html中添加Script标签 将外部Script标签直接添加到public/index.html文件的<head>或<body>部分。适用于全局需要的第三方库或SDK。

<script src="https://example.com/external-script.js"></script>

方法2：使用React Helmet动态加载Script 通过react-helmet库在组件层面动态管理Script标签，适合按需加载的场景。

import { Helmet } from 'react-helmet';

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

方法3：通过JavaScript动态创建Script标签 在useEffect钩子中动态创建并插入Script元素，可控制加载时机和清理资源。

import { useEffect } from 'react';

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

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

方法4：使用第三方库如load-script 通过load-script等专用库简化Script加载过程，提供更完善的错误处理。

npm install load-script

import loadScript from 'load-script';

function LoadPaymentGateway() {
  loadScript('https://payment-gateway.com/sdk.js', (err) => {
    if (err) console.error('Script加载失败');
    else console.log('SDK已就绪');
  });
}