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 (





)
}
相关文章
|
5月前
有关子组件修改父组件传值报错问题
有关子组件修改父组件传值报错问题
37 0
|
3月前
|
JavaScript 搜索推荐
vue【详解】props —— 子组件接收父组件传入的参数
vue【详解】props —— 子组件接收父组件传入的参数
37 0
|
5月前
|
JavaScript
Vue2中子组件调用父组件的方法,父组件调用子组件的方法,父子组件互相传值和方法调用
Vue2中子组件调用父组件的方法,父组件调用子组件的方法,父子组件互相传值和方法调用
Vue2中子组件调用父组件的方法,父组件调用子组件的方法,父子组件互相传值和方法调用
|
5月前
|
JavaScript
vue父组件点击事件向子组件传递值
vue父组件点击事件向子组件传递值
|
5月前
|
前端开发 JavaScript 开发者
vue3、react组件数据传值对比分析——父组件传递子组件,子组件传递父组件(二)
vue3、react组件数据传值对比分析——父组件传递子组件,子组件传递父组件
68 0
|
5月前
|
JavaScript 前端开发 算法
vue3、react组件数据传值对比分析——父组件传递子组件,子组件传递父组件(一)
vue3、react组件数据传值对比分析——父组件传递子组件,子组件传递父组件
64 0
|
5月前
|
JavaScript
Vue子组件调用父组件方法并传参的5种方式:$emit触发、传入子组件function、访问父组件$parent.function、用inject关联父组件provide的方法、用window.fun
Vue子组件调用父组件方法并传参的5种方式:$emit触发、传入子组件function、访问父组件$parent.function、用inject关联父组件provide的方法、用window.fun
|
5月前
|
小程序
子组件调用父组件的方法并传递数据
子组件调用父组件的方法并传递数据
|
10月前
|
JavaScript
vue父组件调用子组件方法
vue父组件调用子组件方法
71 0
|
11月前
|
JavaScript
vue子组件调用父组件方法
vue子组件调用父组件方法
84 0