使用ahooks
antd配合ahooks使用兼容性更好和风格保持一致。访问ahooks官网:https://ahooks.js.org/zh-CN ,查看hooks列表:
1. 使用useMouse
安装ahooks:
cmd
npm i ahooks
ahooks提供了获取鼠标位置的钩子函数:
jsx
import { useMouse } from 'ahooks'
function App() {
// 使用ahooks
const mouse = useMouse()
return (
<>
hello App
<br />
<br />
(pageX: {mouse.pageX}, pageY: {mouse.pageY})
<br />
(clientX: {mouse.clientX}, clientY: {mouse.clientY})
<br />
(screenX: {mouse.screenX}, screenY: {mouse.screenY})
</>
)
}
export default App
运行效果: 可以看到ahooks中的useMouse比我们自己实现的功能更加强大。