react经验10:与jquery配合使用

应用场景

老web项目进行react改造,为了节省时间,部分jquery组件仍然保留。

案例1

使用bootstrapTable组件。

node_modules准备

jquery、bootstrap、bootstrap-table

如果需要typescript,则额外追加

@types/bootstrap、@types/jquery

以上都直接npm安装。

实施步骤:

1.在src的index中挂载jquery到全局变量

js 复制代码
import $ from 'jquery'
window.jQuery = $

2.在需要使用bootstrap-table的组件中引入插件

js 复制代码
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap-table/dist/bootstrap-table.min.css'
import $ from 'jquery'
import 'bootstrap'
import 'bootstrap-table'

接下来就能在合适的时机调用插件

js 复制代码
//例如组件初始化的时候
useEffect(()=>{
	$(dom).bootstrapTable(option)
},[])

案例2

jquery与react混用,比如某段html是由jquery动态生成的,此时又想插入一段react组件。

实施步骤:

1.准备好普通的react组件;

js 复制代码
const DemoComponent=(props:{})=>{
	return (
		<label>啊手动阀示范点</label>
	)
}

2.混合使用

ts 复制代码
//这是由jquery生成的dom
$('<div id="demo">').appendTo('body')
//准备react组件的容器
let root=ReactDOM.createRoot(document.getElementById('demo') as HTMLElement)
//渲染react组件
root.render(<DemoComponent />)
相关推荐
IT_陈寒1 小时前
Python+AI实战:用LangChain构建智能问答系统的5个核心技巧
前端·人工智能·后端
袁煦丞1 小时前
MoneyPrinterTurbo一键生成短视频:cpolar内网穿透实验室第644个成功挑战
前端·程序员·远程工作
代码小学僧1 小时前
让 AI 真正帮你开发:前端 MCP 实用技巧分享
前端
晴殇i1 小时前
前端鉴权新时代:告别 localStorage,拥抱更安全的 JWT 存储方案
前端·javascript·面试
Json____1 小时前
使用node Express 框架框架开发一个前后端分离的二手交易平台项目。
java·前端·express
since �1 小时前
前端转Java,从0到1学习教程
java·前端·学习
小奋斗2 小时前
面试官:[1] == '1'和[1] == 1结果是什么?
前端·面试
萌萌哒草头将军2 小时前
尤雨溪宣布 oxfmt 即将发布!比 Prettier 快45倍 🚀🚀🚀
前端·webpack·vite
weixin_405023372 小时前
webpack 学习
前端·学习·webpack
云中雾丽2 小时前
flutter中 Future 详细介绍
前端