react通过ref,让hooks使用class组件的方法

简介: react通过ref,让hooks使用class组件的方法

下图是class通过ref使用class组件的方法:

    <ComTableView
            onRef={(ref) => { this.TableView = ref }}//ref
          />

如果要让hooks通过ref使用class组件的话,可以先声明一个全局变量TableView:

var TableView;//全局定义
const PushGroup = () => {
   //这里是你的hooks内容

再在调用处这样写即可

        <ComTableView
            onRef={(ref) => { TableView = ref }}
        />

被调用组件的写法

直接在componeDidMount中将自己赋值与调用组件的方法中(与class使用class组件方法的写法一致)

  componentDidMount() {
    this.props.onRef(this);
  }
目录
相关文章
|
前端开发 JavaScript UED
使用React Hooks优化前端应用性能
本文将深入探讨如何使用React Hooks来优化前端应用的性能,重点介绍Hooks在状态管理、副作用处理和组件逻辑复用方面的应用。通过本文的指导,读者将了解到如何利用React Hooks提升前端应用的响应速度和用户体验。
|
前端开发 JavaScript
学习react基础(3)_setState、state、jsx、使用ref的几种形式
本文探讨了React中this.setState和this.state的区别,以及React的核心概念,包括核心库的使用、JSX语法、类与函数组件的区别、事件处理和ref的使用。
179 3
学习react基础(3)_setState、state、jsx、使用ref的几种形式
|
前端开发 JavaScript
React_函数式Hooks和Class比较优缺点
React Hooks与Class组件都能返回JSX并接收props,但Hooks无`this`指向问题,用`useEffect`模拟生命周期,`memo`优化性能,状态更新用`useState`;Class组件通过生命周期方法、`PureComponent`或`shouldComponentUpdate`优化,状态用`this.state`和`this.setState`管理。
180 1
React_函数式Hooks和Class比较优缺点
|
前端开发
react学习(17)回调形式的ref
react学习(17)回调形式的ref
143 9
|
XML JavaScript 前端开发
学习react基础(1)_虚拟dom、diff算法、函数和class创建组件
本文介绍了React的核心概念,包括虚拟DOM、Diff算法以及如何通过函数和类创建React组件。
164 3
|
存储 前端开发 容器
react学习(18)createRef形式的ref
react学习(18)createRef形式的ref
|
前端开发 开发者 UED
数据校验的艺术:揭秘JSF如何将前端与后端验证合二为一,打造无缝用户体验
【8月更文挑战第31天】JavaServer Faces(JSF)是构建企业级Web应用的Java规范,提供了丰富的组件和API,便于快速搭建用户界面。JSF验证框架基于JavaBean验证API(JSR 303/JSR 380),利用注解如`@NotNull`、`@Size`等在模型类上定义验证规则,结合前端的`&lt;h:inputText&gt;`和`&lt;h:message&gt;`标签展示错误信息。
164 0
|
前端开发 JavaScript 测试技术
React Hooks vs. Class Components的奥秘:如何用新时代开发模式让你的项目一鸣惊人?
【8月更文挑战第31天】在现代Web开发中,React提供了两种主要的组件实现方式:Hooks和Class Components。React Hooks自16.8版本推出,允许开发者在不使用类的情况下访问状态和生命周期方法,提高了函数组件的功能性和开发效率。Class Components则基于JavaScript类,提供了丰富的生命周期方法,便于精细控制组件行为。尽管两者在代码组织、性能及开发效率上各有千秋,但随着Hooks的普及,前端开发模式正逐渐转变,Hooks因其实现简便性成为越来越多开发者的选择,而在需要细致管理生命周期的场景下,Class Components仍具优势。
141 0
|
前端开发 知识图谱
[译] React 中的 "最新 Ref 模式"
[译] React 中的 "最新 Ref 模式"
|
JavaScript
react18【系列实用教程】useRef —— 创建 ref 对象,获取 DOM (2024最新版)
react18【系列实用教程】useRef —— 创建 ref 对象,获取 DOM (2024最新版)
198 0
下一篇
开通oss服务