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_函数式Hooks和Class比较优缺点
React Hooks与Class组件都能返回JSX并接收props,但Hooks无`this`指向问题,用`useEffect`模拟生命周期,`memo`优化性能,状态更新用`useState`;Class组件通过生命周期方法、`PureComponent`或`shouldComponentUpdate`优化,状态用`this.state`和`this.setState`管理。
382 1
React_函数式Hooks和Class比较优缺点
|
XML JavaScript 前端开发
学习react基础(1)_虚拟dom、diff算法、函数和class创建组件
本文介绍了React的核心概念,包括虚拟DOM、Diff算法以及如何通过函数和类创建React组件。
313 3
|
前端开发 开发者 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;`标签展示错误信息。
301 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仍具优势。
277 0
|
前端开发
利用React Hooks优化前端状态管理
本文将深入介绍如何利用React Hooks优化前端状态管理,包括Hooks的概念、使用方法以及与传统状态管理方式的对比分析,帮助前端开发人员更好地理解和应用这一现代化的状态管理方案。
|
存储 缓存 前端开发
【React】Hooks面试题集锦
本文集合一些React的Hooks面试题,方便读者以后面试查漏补缺。作者给出自认为可以让面试官满意的简易答案,如果想要了解更深刻,可以点击链接查看对应的详细博文。在此对链接中的博文作者非常感谢🙏。
836 1
|
前端开发 JavaScript 测试技术
React Hooks之useState、useRef
React Hooks之useState、useRef
|
存储 前端开发 JavaScript
React Hooks的useState、useRef使用
React Hooks的useState、useRef使用
395 2
|
前端开发 开发者
React Hooks:提升前端开发效率和代码可维护性
传统的 React 类组件在处理状态管理和生命周期函数时存在一些限制,而引入的 React Hooks 技术可以帮助前端开发者更高效地管理组件状态和逻辑,提升代码的可读性和可维护性。本文将介绍 React Hooks 的基本用法及其在实际项目中的应用场景。