React-3.3 自定义hooks 之自定义滚动条

最新推荐文章于 2024-09-13 22:06:18 发布

CSDN_GMC

最新推荐文章于 2024-09-13 22:06:18 发布

阅读量1k

点赞数

分类专栏： React.js 文章标签： react reactjs javascript

本文链接：https://blog.csdn.net/CSDN_GMC/article/details/107328348

版权

本文探讨了在React应用中创建自定义Hooks来管理滚动条的行为，包括注意事项和示例代码。通过在app.js、hooks.js和index.js中使用自定义Hook，实现了滚动位置的动态显示和手动控制功能。

摘要由CSDN通过智能技术生成

用自定义hooks写滚动条

- app.js
- hooks.js
- index.js
- 图示

自定义hooks需要注意的
自定义 Hook 是一个函数

命名以 “use” 开头，函数内部可以调用其他的 Hook。

在当前函数组件的最顶层调用，（只在最顶层使用 Hook）
不要在循环，条件或嵌套函数中调用 Hook，确保总是在你的 React 函数的最顶层调用他们。

在这里插入图片描述

app.js

import React,{
   useEffect,useState} from 'react';
import {
   useScrollY} from './hooks'

function App(){
   
  // console.log(useSize)

  let [scrollY,setY] = useScrollY();
  // console.log(scrollY);
  let [txt,setTxt] = useState(scrollY);

  useEffect(() => {
   
    window.onscroll=()=>{
   
      setY(window.scrollY);
    }
    return () =>