移动端react-hooks+TS上拉距离顶部一定距离时 改变页面样式

最新推荐文章于 2023-04-01 15:15:39 发布
最新推荐文章于 2023-04-01 15:15:39 发布
阅读量549 收藏 1
点赞数
分类专栏： react react-hooks ts 文章标签： react.js hooks ts
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42215167/article/details/119954329
版权
本文介绍了如何在移动端使用React Hooks和TypeScript，当元素距离顶部达到一定距离时，动态改变页面样式。核心技巧在于利用getBoundingClientRect()方法获取元素相对于浏览器视窗的位置，通过监听滚动事件来实现效果。
摘要由CSDN通过智能技术生成 
const stickyRef = useRef()   //创建一个ref

<div ref={
   stickyRef}></div>  //关联ref

const [sticky, setSticky] = useState(
最低0.47元/天 解锁文章
我是一个粉刷匠呀
关注
专栏目录
react
Jasmin博客
05-27 1180
面试
imporve-3
loveX001的博客
02-26 644
JSX的本质是React.createElement()函数的写法如下 实际开发中不会使用来创建的，一般都是使用JSX的形式开发。在程序中打印一下 为什么 React 使用 JSXBabel 插件如何实现 JSX 到 JS 的编译？ 在 React 面试中，这个问题很容易被追问，也经常被要求手写。它的实现原理是这样的。Babel 读取代码并解析，生成 AST，再将 AST 传入插件层进行转换，在转换时就可以将 JSX 的结构转换为 的函数。如下代码所示： React.createElement源码分析 入
# 如何改变button外形_如何优雅的使用react hooks来进行状态管理
weixin_28700181的博客
12-21 178
在使用react和redux的过程中，一直有一个问题，哪些状态需要放在redux中，状态需要保存在组件内的local state中，此外不合理的使用redux可能会带来状态管理混乱的问题，此外对于local state局部状态而言，react hooks提供了一个比class中的setState更好的一个替代方案。本文主要从状态管理出发，讲讲如何优雅的使用hooks来进行状态管理。如何使用redu...
react 移动端 监听滚动事件 获取滚动条距顶部距离
静静的博客
08-27 1万+
尝试了很多中方法，用下面代码实现了 componentDidMount(){ window.addEventListener('scroll', this.handleScroll); } handleScroll(){ console.log(window.scrollY) }  ...
获取元素距离浏览器窗口左部，顶部的距离
weixin_30897079的博客
12-06 2315
点击一个元素，获取元素距离窗口左边，上边的距离，直接用的 offsetLeft offsetTop, 之前用的时候没问题， 但是这次不行了， 获得的结果一直是0，怎么回事？ 查了资料终于发现 offsetLeft 跟 offsetLeft 没想象的那么简单。 这里要先说下 offsetParent，看下图： 中间 offsetWidth 部分是目标元素，offsetLeft 就是...
react hooks refs入门应用案例
yasinawolaopo的博客
04-01 255
react hooks refs入门应用案例。使用的是video标签来解释
翻译：在 React Hooks 中使用 Typescript 小记
hsany330的专栏
05-29 407
在 React Hooks 中使用 Typescript 小记 最近在关注 Typescript 和 react hook 相关的知识，看到了这篇文章，还不错，get 到了。感谢作者的分享。 原文：Notes on TypeScript: React Hooks 原文作者简介：A. Sharif：专注于质量。软件开发。产品管理。 https://twitter.com/sharifsbeat @busypeoples github busypeoples 简介 这些笔记有助于更好.
前端面试题汇总 - 基础
将心_的博客
10-18 1920
前端面试基础题目汇总
web前端手册
caiqian97的博客
08-28 1777
HTML基础 1. HTML 文件中的 DOCTYPE 是什么作用？ HTML超文本标记语言: 是一个标记语言, 就有对应的语法标准 DOCTYPE 即 Document Type，网页文件的文档类型标准。 主要作用是告诉浏览器的解析器要使用哪种 HTML规范 或 XHTML规范 来解析页面。 DOCTYPE 需要放置在 HTML 文件的 <html>标签之前，如： <!DOCTYPE html> <html> ... </html> (目前主流) &
获取 React 元素到窗口顶端的距离
Ranye的博客
06-10 2498
testRef.current.scrollTop好像不止React元素如此，所有DOM元素都是如此
常见的React Hooks（必会）
znhyXYG的博客
08-04 2733
React hooks
react技术全家桶（18）字符串形式的ref
weixin_41380194的博客
01-23 501
需求： 自定义组件，功能说明如下：1.点击按钮，提示第一个输入框中的值 2.当第2个输入框失去焦点时，提示这个输入框中的值。 不用你res的写法： class Demo extends React.Component { showData = ()=>{ const input = document.getElementById(‘input1’); alert(input.value); } render() { return ( 点我提示左侧数据 ) } } ReactDOM.render
position-sticky
weixin_45790442的博客
02-07 216
position:sticky 注：以chrome为主 的浏览器都在兼容这个属性，其中Safari目前还需要-webkit-私有前缀。 position:sticky简介 单词sticky的中文意思是“粘性的”，position:sticky表现也符合这个粘性的表现。基本上，可以看出是position:relative和position:fixed的结合体——当元素在屏幕内，表现为relative...
React Hook
Sitaigu的博客
07-30 327
React Hook Hook 是 React 16.8 的新增一系列封装函数，它可以让函数组件中可以使用state，跨组件通信，生命周期等React的特性 Hook的意义在于：将函数组件中的业务逻辑抽离出来，保证组件UI的纯净化 内置Hook (10个) 1.useState 定义和修改state [修改state的方法得到的一定是新值] 基本语法： //定义state和修改state的方法 const [name,setName]=useState<数据类型>(数据默认值) //
ReactHooks——监听窗口大小、滚动距离、滚动方向
HarryHY的博客
03-10 2845
重要代码 //获取当前窗口大小 const getWindowSize = () => ({ innerHeight: window.innerHeight, innerWidth: window.innerWidth, }); const [windowSize, setWindowSize] = useState(getWindowSize()); const handleResize = () => { setWindowSize(getWind
可能是你需要的 React + TypeScript 50 条规范和经验
weixin_34221332的博客
05-23 1083
这篇文章没有对错之分，肯定也有不完善的地方，结合了自己日常开发和经验。可以让你书写代码更具严谨性,希望看完之后有所帮助。本文字数4000+ ，看完本文大概需半小时。 1. 注释 (1) 文件顶部的注释，包括描述、作者、日期 /** * @description xxxxxx * @author chengfeng * @since 19/05/21 */ 复制代码(2) 模块的注释 /...
React hooks - Ref 使用实例
热门推荐
吃瓜群众的博客
05-19 1万+
useRef 返回一个可变的 ref 对象，其 .current 属性被初始化为传入的参数（initialValue）。返回的 ref 对象在组件的整个生命周期内保持不变。 useRef() ，它可以很方便地保存任何可变值，其类似于在 class 中使用实例字段的方式 1.获取state的旧值 demo import React,{useState,useRef,useEffect} from "react"; function Example () { const [count, setCo.
react 组件 进阶之 ref （ts 版本）
twinkle的博客
02-26 4821
含义以及使用方法 ref （reference）是引用，在 vue 中是用于或者真实的dom, 那么在react 中，ref 的作用是啥呢？ 场景：希望直接使用dom元素中的某个方法，或者希望直接使用自定义组件中的某个方法 ref作用于内置的html组件 ref作用于内置的html组件，得到的将是真实的dom对象 使用string 方式 import React, { Component } from 'react' export default class TestRef extends Com
原生js获取 一个dom元素距离页面可视区域的位置值 -- getBoundingClientRect
04-13 1454
getBoundingClientRect() 这个方法返回一个矩形对象，包含四个属性：left、top、right和bottom。分别表示元素各边与页面上边和左边的距离。 var box=document.getElementById('box'); // 获取元素 alert(box.getBoundingClientRect().top); // 元素上边距离页面上边的距...
在react+hooks+ts+antdesign中，写两个联动的ProFormSelect
最新发布
07-15
在React + Hooks + TypeScript + Ant Design中，要实现两个联动的 `ProFormSelect` 组件，你可以按照以下步骤进行操作： 1. 首先，确保你已经安装了 `antd` 和 `@ant-design/pro-form` 这两个依赖。 2. 在你的组件中引入所需的模块： ```tsx import React, { useState } from 'react'; import { ProFormSelect } from '@ant-design/pro-form'; import { Select } from 'antd'; const { Option } = Select; ``` 3. 创建一个函数组件，定义初始状态和联动逻辑： ```tsx const LinkedProFormSelect: React.FC = () => { // 定义两个联动的下拉框的选项数据 const [firstSelectOptions, setFirstSelectOptions] = useState<string[]>([]); const [secondSelectOptions, setSecondSelectOptions] = useState<string[]>([]); // 第一个下拉框选择项改变时的回调函数 const handleFirstSelectChange = (value: string) => { // 根据第一个下拉框的选项值更新第二个下拉框的选项数据 if (value === 'option1') { setSecondSelectOptions(['option1-1', 'option1-2']); } else if (value === 'option2') { setSecondSelectOptions(['option2-1', 'option2-2']); } }; return ( <div> <ProFormSelect name="firstSelect" label="First Select" options={firstSelectOptions.map((option) => ({ value: option, label: option }))} fieldProps={{ onChange: handleFirstSelectChange, }} /> <ProFormSelect name="secondSelect" label="Second Select" options={secondSelectOptions.map((option) => ({ value: option, label: option }))} /> </div> ); }; export default LinkedProFormSelect; ``` 4. 在你的父组件中使用 `LinkedProFormSelect` 组件： ```tsx const ParentComponent: React.FC = () => { return ( <div> <LinkedProFormSelect /> </div> ); }; export default ParentComponent; ``` 这样，你就实现了两个联动的 `ProFormSelect` 组件。当第一个下拉框的选项改变时，第二个下拉框的选项会根据选择的值进行更新。你可以根据实际需求修改联动逻辑和选项数据。希望能对你有所帮助！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值