重温react-10(函数组件和类组件的ref获取方式)

App.js的代码

06是函数组件

07是类组件

javascript 复制代码
import React, { useEffect, useRef } from 'react';
import LearnFunction06 from './LearnFunction06'; //  函数组件和类组件的ref使用方式
import LearnFunction07 from './LearnFunction07'; //  函数组件和类组件的ref使用方式
export default function BoxReact() {

  const learnRef = useRef(null)
  const classRef = useRef(null)
  useEffect(() => {
    console.log(learnRef.current);
    console.log(classRef.current);
  }, [])
  return (
    <div>
      <LearnFunction06 ref={learnRef}></LearnFunction06>
      <LearnFunction07 ref={classRef}></LearnFunction07>
    </div>
  )
}

06的代码

javascript 复制代码
import React, { forwardRef } from 'react'

export default forwardRef(function LearnFunction06(props, ref) {
    return (
        <div ref={ref}> LearnFunction06</div>
    )
})

正常函数组件是没有ref的,需要通过forwardRef来修饰组件才能产生ref

07的代码

javascript 复制代码
import React, { Component } from 'react'

export default class LearnFunction07 extends Component {
  render() {
    return (
      <div>LearnFunction07</div>
    )
  }
}

效果图

这样都可以拿到ref啦

相关推荐
abigale035 分钟前
webpack+vite前端构建工具 -11实战中的配置技巧
前端·webpack·node.js
专注API从业者25 分钟前
构建淘宝评论监控系统:API 接口开发与实时数据采集教程
大数据·前端·数据库·oracle
Joker`s smile28 分钟前
Chrome安装老版本、不同版本,自制便携版本用于前端调试
前端·chrome
weixin_4166399731 分钟前
爬虫工程师Chrome开发者工具简单介绍
前端·chrome·爬虫
我是如子啊36 分钟前
【解决“此扩展可能损坏”】Edge浏览器(chrome系列通杀))扩展损坏?一招保留数据快速修复
前端·chrome·edge
灵性花火36 分钟前
Qt的前端和后端过于耦合(0/7)
开发语言·前端·qt
孤水寒月4 小时前
基于HTML的悬窗可拖动记事本
前端·css·html
祝余呀5 小时前
html初学者第一天
前端·html
脑袋大大的6 小时前
JavaScript 性能优化实战:减少 DOM 操作引发的重排与重绘
开发语言·javascript·性能优化
速易达网络7 小时前
RuoYi、Vue CLI 和 uni-app 结合构建跨端全家桶方案
javascript·vue.js·低代码