react中refs的作用是什么?有几种用法?

在 React 中,ref 是用来获取组件或 DOM 元素的引用的一种方式。ref 可以在组件挂载后被访问,并且允许您从组件中访问底层的 DOM 元素或组件实例。

ref 有两种用法:字符串 ref 和回调函数 ref。

  1. 字符串 ref(string refs)是一种早期的使用 ref 的方式。它通过设置 ref 属性为一个字符串,将 ref 关联到一个 DOM 元素或组件实例上。然后可以通过 this.refs 获取这个 ref。

    javascript 复制代码
    class MyComponent extends React.Component {
      componentDidMount() {
        const input = this.refs.myInput;
        input.focus();
      }
    
      render() {
        return(
          <div>
            <input type="text" ref="myInput" />
          </div>
        );
      }
    }
  2. 回调函数 ref(callback refs)是一种现代而常用的使用 ref 的方式。它通过设置 ref 属性为一个回调函数,将 ref 关联到一个 DOM 元素或组件实例上。当组件挂载或卸载时,React 会调用这个回调函数,并将 DOM 元素或组件实例作为参数传递进去。

    javascript 复制代码
    class MyComponent extends React.Component {
      constructor(props) {
        super(props);
        this.inputRef = null;
      }
    
      componentDidMount() {
        this.inputRef.focus();
      }
    
      setInputRef = (ref) => {
        this.inputRef = ref;
      };
    
      render() {
        return (
          <div>
            <input type="text" ref={this.setInputRef} />
          </div>
        );
      }
    }

    需要注意的是,字符串 ref 在 React v16.3 之后被废弃了,建议使用回调函数 ref。此外,对于函数组件,可以使用 useRef Hook 来获取组件或 DOM 元素的引用

相关推荐
yanlele11 分钟前
我用爬虫抓取了 25 年 6 月掘金热门面试文章
前端·javascript·面试
lichenyang45316 分钟前
React移动端开发项目优化
前端·react.js·前端框架
天若有情67317 分钟前
React、Vue、Angular的性能优化与源码解析概述
vue.js·react.js·angular.js
你的人类朋友20 分钟前
🍃Kubernetes(k8s)核心概念一览
前端·后端·自动化运维
web_Hsir21 分钟前
vue3.2 前端动态分页算法
前端·算法
烛阴1 小时前
WebSocket实时通信入门到实践
前端·javascript
草巾冒小子1 小时前
vue3实战:.ts文件中的interface定义与抛出、其他文件的调用方式
前端·javascript·vue.js
DoraBigHead1 小时前
你写前端按钮,他们扛服务器压力:搞懂后端那些“黑话”!
前端·javascript·架构
前端世界2 小时前
鸿蒙UI开发全解:JS与Java双引擎实战指南
javascript·ui·harmonyos
Xiaouuuuua2 小时前
一个简单的脚本,让pdf开启夜间模式
java·前端·pdf