forwardRef的简单使用:用于解决父组件传递ref给子组件的问题

简介: forwardRef的简单使用:用于解决父组件传递ref给子组件的问题

forwardRef接收两个参数,一个是props,另一个就是传进来的ref。下面的代码以父组件传递ref给子组件,并改变子组件中input的聚焦为例:

子组件Child被forwardRef包裹,并接收两个参数,ref由父组件传递过来,并绑定到input元素的ref属性上。

import React, {useState, useRef, forwardRef } from 'react'

// 子组件Child
const Child = forwardRef((props, ref) => {
console.log(props, ref);
return (


{props.status ? '聚焦' : '失焦'}



)
});

// 父组件TestForwardRef
export default function TestForwardRef() {

const [status, setStatus] = useState(false);

const inputRef = useRef();

return (





)
}
相关文章
|
设计模式 前端开发 数据可视化
【第4期】一文了解React UI 组件库
【第4期】一文了解React UI 组件库
738 0
|
JavaScript CDN
js:spark-md5分片计算文件的md5值
js:spark-md5分片计算文件的md5值
1937 0
|
4月前
|
XML 人工智能 Java
java实现PDF 电子签章
本文介绍了使用Java将Word文档转换为PDF并添加水印、签名和盖章的方法。通过Apache POI读取Word内容,结合OpenPDF生成PDF文件,并利用PdfPageEvent接口实现页面水印与签名功能。代码示例清晰展示了转换流程及关键实现细节。
271 0
|
存储 编解码 JSON
解决浏览器存储问题,不得不了解的cookie、localStorage和sessionStorage
该文章详细对比了浏览器存储机制中的cookie、localStorage和sessionStorage的不同之处,以及各自的适用场景。
|
前端开发 Java 应用服务中间件
计算机Java项目|基于SpringBoot的在线视频教育平台的设计与实现
计算机Java项目|基于SpringBoot的在线视频教育平台的设计与实现
262 0
|
JavaScript 前端开发 开发者
|
JavaScript
echarts根据上级元素的大小自动更新echarts(element-resize-detector)配合防抖解决大屏页面卡顿的问题
如何在Vue中使用`element-resize-detector`库来自动更新ECharts图表的大小,以适应其上级元素大小的变化,并结合使用防抖技术来解决大屏页面上的卡顿问题。
521 5
|
前端开发 JavaScript UED
axios取消请求CancelToken的原理解析及用法示例
axios取消请求CancelToken的原理解析及用法示例
818 0
|
前端开发 JavaScript
js【详解】Promise(含 Promise 的三种状态及其变化,创建 Promise, Promise.all 语法、Promise.all 实战范例、手写 Promise.all)
js【详解】Promise(含 Promise 的三种状态及其变化,创建 Promise, Promise.all 语法、Promise.all 实战范例、手写 Promise.all)
2764 0
|
前端开发 JavaScript 数据处理
React 中展示组件和容器组件
【8月更文挑战第31天】
353 0