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 (





)
}
相关文章
|
6月前
有关子组件修改父组件传值报错问题
有关子组件修改父组件传值报错问题
41 0
|
4月前
|
JavaScript 搜索推荐
vue【详解】props —— 子组件接收父组件传入的参数
vue【详解】props —— 子组件接收父组件传入的参数
45 0
|
6月前
|
JavaScript
Vue2中子组件调用父组件的方法,父组件调用子组件的方法,父子组件互相传值和方法调用
Vue2中子组件调用父组件的方法,父组件调用子组件的方法,父子组件互相传值和方法调用
Vue2中子组件调用父组件的方法,父组件调用子组件的方法,父子组件互相传值和方法调用
|
5月前
|
JavaScript
子组件向父组件传参的方式?
子组件向父组件传参的方式?
85 0
|
6月前
|
JavaScript
vue父组件点击事件向子组件传递值
vue父组件点击事件向子组件传递值
|
6月前
|
前端开发 JavaScript 开发者
vue3、react组件数据传值对比分析——父组件传递子组件,子组件传递父组件(二)
vue3、react组件数据传值对比分析——父组件传递子组件,子组件传递父组件
73 0
|
6月前
|
JavaScript 前端开发 算法
vue3、react组件数据传值对比分析——父组件传递子组件,子组件传递父组件(一)
vue3、react组件数据传值对比分析——父组件传递子组件,子组件传递父组件
71 0
|
6月前
|
小程序
子组件调用父组件的方法并传递数据
子组件调用父组件的方法并传递数据
vue3 引用组件 父组件传递参数给子组件
vue3 引用组件 父组件传递参数给子组件
111 0
|
前端开发 JavaScript
React中Refs的作用是什么?如何使用,父组件是函数组件ref如何获取子组件内容
React中Refs的作用是什么?如何使用,父组件是函数组件ref如何获取子组件内容
195 0