forWardRef高阶组件使用

作用总览: 让父组件能控制子组件的DOM元素

作用实现细节: 在父组件创建ref(引用, useRef创建的), forward将ref 传递给子组件

代码展示

import React, { forwardRef, useRef } from 'react';
//使用forwardRef创建一个高阶组件
const MyInput = forwardRef((props, ref) => {
//你可以在这里将ref传递给实际的DOM元素
return <input {...props) ref={ref} />;
});

//使用MyInput组件, 并且传递一个ref
const App = () => {
    const inputRef = useRef(null)
    const focusInput = () => {
        if(inputRef.current) {
            inputRef.current.focus()
        }
    }
    
    return (
    <div> 
    <MyInput ref={inputRef} placeholder="点击按钮聚焦" />  
    <button onClick={focusInput}>聚焦输入框</button> 
    </div>
    )
}