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 安全
除了高阶组件和render props,还有哪些在 React 中实现代码复用的方法?
除了高阶组件和render props,还有哪些在 React 中实现代码复用的方法?
495 62
|
前端开发 JavaScript
React_函数式Hooks和Class比较优缺点
React Hooks与Class组件都能返回JSX并接收props,但Hooks无`this`指向问题,用`useEffect`模拟生命周期,`memo`优化性能,状态更新用`useState`;Class组件通过生命周期方法、`PureComponent`或`shouldComponentUpdate`优化,状态用`this.state`和`this.setState`管理。
358 1
React_函数式Hooks和Class比较优缺点
|
前端开发
|
Android开发
jmessage-react-plugin的正确引入方法
jmessage-react-plugin的正确引入方法
180 1
|
前端开发 JavaScript 开发者
请详细介绍React挂载阶段的方法。
请详细介绍React挂载阶段的方法。
318 9
|
XML JavaScript 前端开发
学习react基础(1)_虚拟dom、diff算法、函数和class创建组件
本文介绍了React的核心概念,包括虚拟DOM、Diff算法以及如何通过函数和类创建React组件。
297 3
封装react-antd-table组件参数以及方法如rowSelection、pageNum、pageSize、分页方法等等
文章介绍了如何封装React-Antd的Table组件,包括参数和方法,如行选择(rowSelection)、页码(pageNum)、页面大小(pageSize)、分页方法等,以简化在不同表格组件中的重复代码。
580 1
|
前端开发 JavaScript
React 组件生命周期方法详解
【8月更文挑战第30天】
452 5
|
前端开发 JavaScript API
学习 React 的方法
【8月更文挑战第26天】学习 React 的方法
309 1
|
前端开发 Scala
Scala并发编程的react、loop方法详解
在这个例子中,`MyActor`会无限循环接收和处理消息。当收到一个字符串消息时,它会打印出"Received: "加上消息内容。如果收到其他类型的消息,它会打印"Unknown message"。
387 1