react 如何引入js 插件
通过 npm 安装引入
在项目目录下运行命令安装插件（以 lodash 为例）：
npm install lodash在组件中通过 import 引入：
import _ from 'lodash';通过 CDN 引入
在 public/index.html 中添加 <script> 标签：
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>插件会挂载到全局对象（如 window._），直接在组件中使用即可。
动态加载脚本
使用 useEffect 动态插入脚本（适用于按需加载）：
import { useEffect } from 'react';
function MyComponent() {
useEffect(() => {
const script = document.createElement('script');
script.src = 'https://example.com/plugin.js';
script.async = true;
document.body.appendChild(script);
return () => {
document.body.removeChild(script);
};
}, []);
}使用 react-helmet 管理头部标签
适用于需要控制 <head> 的场景：
import { Helmet } from 'react-helmet';
function App() {
return (
<div>
<Helmet>
<script src="https://example.com/plugin.js" />
</Helmet>
</div>
);
}注意事项
- 使用 CDN 时需注意插件的全局变量命名冲突。
- 确保插件兼容 React 的虚拟 DOM 机制，避免直接操作 DOM 的插件引发问题。
- TypeScript 项目需补充类型声明（通过
@types/插件名或手动声明）。
