React ref的转发

在前面学习ref时讲过，ref不能应用于函数式组件：
因为函数式组件没有实例，所以不能获取到对应的组件对象

但是，在开发中我们可能想要获取函数式组件中某个元素的DOM，这个时候我们应该如何操作呢？

方式一：直接传入ref属性（错误的做法）
方式二：通过forwardRef高阶函数；

import React, {PureComponent, createRef, forwardRef} from 'react';
class Home extends PureComponent{render() {return <h2>Home</h2>}
}
/*function Profile(props) {return <h2>Profile</h2>
}*/
const Profile = forwardRef(function Profile(props, ref) {return <h2 ref={ref}>Profile</h2>
})
class App extends PureComponent {constructor(props) {super(props);this.titleRef = createRef()this.homeRef = createRef()this.profileRef = createRef()}render() {return (<div><h2 ref={this.titleRef}>hello</h2><Home ref={this.homeRef} /><Profile ref={this.profileRef} /><button onClick={e => this.printRef()}>打印ref</button></div>);}printRef () {console.log(this.titleRef.current)console.log(this.homeRef.current)console.log(this.profileRef.current)}
}
export default App;

React ref的转发相关推荐

一文搞懂 React ref
最近也开始研究React,这篇文章主要是讲述 Ref 相关的内容,如有错误请指正. ref 的由来在典型的 React 数据流中,props 是父组件与子组件交互的唯一方式.要修改一个子组件,你需要 ...
React ref的基本使用
React出现后,提供了state, props,前端开发者无须在直接操作dom.React官方不推荐我们直接访问.操作DOM,但是,还是为我们留了一个后门ref,方便访问操作DOM.因为在某些特定的 ...
React ref用法
React ref 官方文档 1.介绍 Refs 提供了一种方式,允许我们访问 DOM 节点或在 render 方法中创建的 React 元素. DOM 节点:就是平常所说的能在页面中直接获取到的原生 ...
3.0 react ref 使用读取子组数据转发forword
1 定义实例类中: this.r1 = React.createRef();//实例一个ref , 包含current属性渲染完以后可以用 this.xx.current 来获取dom 回调类= ...
react ref无法获取被高阶组件包装的原始组件问题
问题描述: react无法通过ref获取被高阶组件包装的原始组件通过ref调用被dva connect包裹的组件报错我们在平时使用ref获取一个组件的引用后,就可以直接通过ref调用组件自身的函数 ...
React Ref 的使用
React 提供了 refrefref 属性,让我们可以引用组件的实例或者原生 DOM 元素.使用 refrefref,可以在父组件中调用子组件暴露出来的方法,或者调用原生 element 的 API ...
React ref useRef 完全指南
在这篇文章中,你将学习如何使用React.useRef()钩子来创建持久的可变值(也称为references或refs),以及访问DOM元素. 我们将从下面几点讲解: 1. 可变值 - 1.1用例:记 ...
ReactJS学习系列课程（React ref的使用）
在我学习React的过程当中,总会被一些名词搞得晕头转向,但是细想起来又非常简单,比如React定义的这个refs,其实就是用于获取dom的一种方式. 在React中组件并不是真实的 DOM 节点,而 ...
(精华)2020年7月26日 React ref的三种方式
import React from 'react'export default class RefDemo extends React.Component {constructor() {super( ...

React ref的转发

React ref的转发相关推荐

最新文章

热门文章