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 (
)
}