forwardRef和useImperativeHandle到底能做啥
线上个官网例子
App.js
import { useRef } from 'react';
import MyInput from './MyInput.js';export default function Form() {const ref = useRef(null);function handleClick() {ref.current.focus();// This won't work because the DOM node isn't exposed:// ref.current.style.opacity = 0.5;}return (<form><MyInput placeholder="Enter your name" ref={ref} /><button type="button" onClick={handleClick}>Edit</button></form>);
}Myinput.js
import { forwardRef, useRef, useImperativeHandle } from 'react';const MyInput = forwardRef(function MyInput(props, ref) {const inputRef = useRef(null);useImperativeHandle(ref, () => {return {focus() {inputRef.current.focus();},scrollIntoView() {inputRef.current.scrollIntoView();},};}, []);return <input {...props} ref={inputRef} />;
});export default MyInput;forwardRef是React 提供的一个高阶函数,配合useImperativeHandle, 可以让父组件拿到子组件中某个element暴露的方法,比如input的focus事件, 父子组件都需要申明一个ref,forwardRef可以用来包裹子组件,并且把父组件的ref传递到子组件中, 两个ref通过useImperativeHandle进行联动
