一、react中ref、createRef、React.forwardRef

（1）Ref 转发是一项将 ref 自动地通过组件传递到其一子组件的技巧。对于大多数应用中的组件来说，这通常不是必需的。但其对某些组件，尤其是可重用的组件库是很有用的。
（2）React.forwardRef(render)的返回值是react组件，接收的参数是一个 render函数，函数签名为render(props, ref)，第二个参数将其接受的 ref 属性转发到render返回的组件中。
这项技术并不常见，但在以下两种场景中特别有用:
1）转发 ref 到组件内部的DOM 节点上
2）在高阶组件中转发ref
现在有这样一个场景，我需要得到一个dom元素的值（不使用useState），需要使用一个类组件的方法，需要操作一个函数组件中的dom元素，那么应该怎么做呢？

1. 通过ref操作dom元素或者获取dom元素的值

思路流程及代码如下（示例）：(当然，一般操作dom经常用useRef来初始化)

import React from 'react'
import { ReactDOM } from 'react-dom'
//  一、通过ref操作dom元素或者获取dom元素的值
class Form extends React.Component {constructor(props) {super(props)//1.声明ref方法，实际上是得到{current:null}this.firstInputRef = React.createRef(null)this.secondInputRef = React.createRef(null)this.resultInputRef = React.createRef(null)}onClickAdd = () => {//3.此时InputRef下的current就是dom元素了，//调current可以直接使用dom元素的value了this.resultInputRef.current.value = this.firstInputRef.current.value + this.secondInputRef.current.value}render () {return (<div>{/* 2.渲染时，把current.null（inputRef）给这个ref，ref挂载到dom元素上，//此时null替换成了对应的dom元素 */}<input type="text" ref={this.firstInputRef} /><span> + </span><input type="text" ref={this.secondInputRef} /><button onClick={this.onClickAdd}> = </button><input type="text" ref={this.resultInputRef} /></div>)}
}

2. 通过ref操作类组件实例来获取类组件的方法或者操作类组件

思路流程及代码如下（示例）：

import React from 'react'
import { ReactDOM } from 'react-dom'
//  二、通过ref操作类组件实例来获取类组件的方法或者操作类组件
class Form extends React.Component {constructor(props) {super(props)//1.声明ref方法，实际上是得到{current:null}this.inputRef = React.createRef(null)}//3.此时inputRef下的current就是Input类组件实例，因为是Input类实例，//所以可以使用实例下的方法（onFocus1,此方法有可以聚焦focus()）onFocus = () => {this.inputRef.current.focus()}render () {return (<div>{/* 2.渲染时，把current.null（inputRef）给这个ref，ref挂载到Input类组件实例ref属性上，此时null替换成了类的实例 */}<Input type="text" ref={this.inputRef} /><button onClick={this.onFocus}>聚焦</button></div>)}
}
//类组件Input
class Input extends React.Component {constructor(props) {super(props)//4.声明ref方法，实际上是得到{current:null}this.InputRef = React.createRef(null)}onFocus1 = () => {//6.此时InputRef下的current就是dom元素了，可以直接使用dom元素的聚焦方法了this.InputRef.current.focus();}render () {return (<div>{/* 5.渲染时，把current.null（InputRef）给这个ref，ref挂载到dom元素上，此时null替换成了对应的dom元素 */}<input type="text" ref={this.InputRef} /></div>)}
}

3. 通过ref操作函数式组件

思路流程及代码如下（示例）：

import React from 'react'
import { ReactDOM } from 'react-dom'
//  三、通过ref操作函数式组件
class Form extends React.Component {constructor(props) {super(props)//1.声明ref方法，实际上是得到{current:null}this.inputRef = React.createRef(null)}//4.此时inputRef下的current就是Input函数式组件，//Input函数式组件可以通过ref拿到dom元素，然后就可以调用真实dom元素聚焦方法onFocus = () => {this.inputRef.current.focus()}render () {return (<div>{/* 2.渲染时，把current.null（inputRef）给这个ref，ref挂载到Iput函数式组件上，此时null替换成了函数式组件 */}<Input type="text" ref={this.inputRef} /><button onClick={this.onFocus}>聚焦</button></div>)}
}
//函数式组件,必须使用React.forwardRef()包裹
const Iuput =React.forwardRef((props,ref)=>{return (<div>{/* 3.渲染时，React.forwardRef()将ref向下传递，传递到函数式组件ref上，此时null替换成了对应的dom元素 */}<input type="text" ref={ref} /></div>)
})

父组件操作子组件的ref，操作子组件的dom

react中ref、createRef、React.forwardRef分别是什么？如何使用？相关推荐

React中ref的使用方法
React中ref的使用方法在react典型的数据流中, props 传递是父子组件交互的唯一方式:通过传递一个新的 props 值来使子组件重新 re-render ,从而达到父子组件通信.当然, ...
React 中ref 的使用（类组件和函数组件）以及forwardRef 与 useImperativeHandle 详解
前言在一个父组件中,我们想要获取到其中的节点元素或者子组件实例,从而直接调用其上面的方法.Class 类组件和函数组件是两种不同的写法. 1. Class 组件中使用ref 在 React 的 Cl ...
react中ref已废弃，请使用React.createRef()
在项目开发过程中难免会从操作dom,在react中获取dom的方式 (1)ref(已废弃) //绑定ref <input ref="getInput"/> //获取do ...
React中ref的使用方法和使用场景（详解）
摘要不管在Vue中还是React,如果我们想使用一个元素的DOM,不需要通过JS中操纵DOM的方法,它们提供了一个专属的API就是ref. 而Vue中的ref可能比较简单,这一篇主要讲一下如何在Re ...
react中ref的使用
在react中获取真实dom的时候就需要用到ref属性,具体使用如下 var MyComponent = React.createClass({handleClick: function() {con ...
React中ref的理解
(1)React的ref有3种用法: 字符串 dom节点上使用,通过this.refs[refName]来引用真实的dom节点 <input ref="inputRef" / ...
react中函数式组件React Hooks
React Hooks 函数式组件使用hooks理由高阶组件为了复用,导致代码层级复杂生命周期的复杂写成functional组件,无状态组件,因为需要状态,又改成了class,成本高在16. ...
react中html转换,React中的HTML转义写法
在JSX中输出固定内容直接使用UTF-8字符 {代码...} 使用HTML转义字符 {代码...} 或者十进制的转义字符 {代码...} 动态内容的转义但是如果在外面加一层大括号的话,react为 ...
react中ref使用方法解析
文章目录什么是ref string类型 createRef创建写法一: 写法二: 什么是ref 组件不是真实的DOM节点,在react开发中,官方也不建议直接去操作原生的DOM.组件的DOM节点是 ...

react中ref、createRef、React.forwardRef分别是什么？如何使用？

一、react中ref、createRef、React.forwardRef

1. 通过ref操作dom元素或者获取dom元素的值

2. 通过ref操作类组件实例来获取类组件的方法或者操作类组件

3. 通过ref操作函数式组件

react中ref、createRef、React.forwardRef分别是什么？如何使用？相关推荐

最新文章

热门文章