首页 > 其他分享 >react ref

react ref

时间:2023-04-21 15:11:47浏览次数:42  
标签:current useRef DOM react ref 节点

一、使用 ref 操作 DOM

1、要访问由 React 管理的 DOM 节点,首先,引入 useRef Hook:

import { useRef } from 'react';

2、然后,在你的组件中使用它声明一个 ref:

const myRef = useRef(null);

3、最后,将其作为 ref 属性传给 DOM 节点:

<div ref={myRef}>

  总结:useRef Hook 返回一个对象,该对象有一个名为 current 的属性。最初,myRef.currentnull。当 React 为这个 <div> 创建一个 DOM 节点时,React 会把对该节点的引用放入 myRef.current。然后,你可以从 事件处理器 访问此 DOM 节点,并使用在其上定义的内置浏览器 API。

摘自自react中文网:https://zh-hans.react.dev/learn/manipulating-the-dom-with-refs

二、使用 ref 引用值

当你希望组件“记住”某些信息,但又不想让这些信息 触发新的渲染 时,就可以使用 ref 

摘自:https://zh-hans.react.dev/learn/referencing-values-with-refs

标签:current,useRef,DOM,react,ref,节点
From: https://www.cnblogs.com/ducky-L/p/17340409.html

相关文章

  • 【Nginx】valid_referers 参数绕坑指南
    Nginx提供了valid_referers参数用于检查url中refer参数的状态,首先看下官方配置:Syntax:valid_referersnone|blocked|server_names|string...;Default: —Context: server,location123能看到valid_referers总共有4种值可以使用,none、blocked、server_names、string。我......
  • NGINX根据客户端真实ip限制/referer限制
    最近后端服务被攻击,所有接口被疯狂调用,记录一次nginx应对攻击的方案,包括黑白名单、referer限定等。一、NGINX根据用户真实IP限源1、nginx日志打印在nginx.conf配置文件中的http模块打印log_formatmain'$remote_addr-$remote_user[$time_local]"$request"'......
  • Nginx配置referer校验,实现简单的防盗链
    1、NginxReferer模块nginx模块ngx_http_referer_module通常用于阻挡来源非法的域名请求。当一个请求头的Referer字段中包含一些非正确的字段,这个模块可以禁止这个请求访问站点。构造Referer的请求很容易实现,所以使用这个模块并不能100%的阻止这些请求。2、valid_referers指令......
  • Django框架——手写web框架、wsgiref模块、动静态网页、jinja2模块、主流web框架、Dja
    web应用'''通过浏览器访问的应用程序!!!'''1.两种模式c/sb/s B/S:browser---------------->server2.web应用程序的有点 2.1只需要一个浏览器即可2.2 节省资源2.3 他们不需要更新,因为所有新的特性都在服务器上执行3.web应用程序的缺点 #特别依赖服务端程序的健壮......
  • vue中的ref 和 reactive--今天学了啥 23/3/12
     这两者都是默认deepreactive,不同的是reactive使用es6的proxy,只能使对象reactive。ref不仅支持对象还支持基本数组,不能说ref是reactive的超集,因为这两者返回的类型就不一样。 Reftype:functionref<T>(value:T):Ref<UnwrapRef<T>>interfaceRef<T>{value:T}如......
  • C#基础 ref out 函数参数 不算重载的简单示例
     .NETFramework:4.7.2       IDE:VisualStudioCommunity2019        OS:Windows10x64    typesetting:Markdown codeusingSystem;namespaceConsoleApp{classProgram{staticvoidMain(string[]args){......
  • 你也可以动手参数有效微调:LoRA、Prefix Tuning、P-Tuning、Prompt Tuning
    Part1前言随着大语言模型的流行,如何让大模型在消费级GPU上进行微调训练成为了热点。掌握参数有效微调成为每个自然语言处理工程师必不可少的技能,正好huggingface开源了一个PEFT库,让我们也能够自己动手去了解参数有效微调。接下来以中文情感分析(二分类)去了解下参数有效微调。使......
  • Git Tip: git push ‘No refs in common and none specified’
    评:@seehttp://www.thebuzzmedia.com/git-tip-git-push-no-refs-in-common-and-none-specified/Gitisasource-controltoolusedbysoftwaredevelopers.IrecentlyswitchedfromSubversiontoGitandwhilethingshavebeenmostlysmooth,therehavebeena......
  • java.lang.IllegalArgumentException: Illegal group reference
    评:在使用String的replaceFirst(regex,replacement)的时候出现java.lang.IllegalArgumentException:Illegalgroup原因是第一个参数支持正则表达式,replacement中出现“$”,会按照$1$2的分组模式进行匹配,当编译器发现“$”后跟的不是整数的时候,就会抛出“非法的组引用”的异常......
  • Vue3 toRef与toRefs
    视频直接用ref是创建新的对象10.toRef作用:创建一个ref对象,其value值指向另一个对象中的某个属性。语法:constname=toRef(person,'name')应用:要将响应式对象中的某个属性单独提供给外部使用时。扩展:toRefs与toRef功能一致,但可以批量创建多个ref对象,语法......