react经验10：与jquery配合使用

淘人居士2024-02-01 14:45

应用场景

老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 />)