在之前的react开发中，我们可以直接通过ref访问类组件中的属性或调用类组件的成员方法。但是如果子组件是函数式组件，则其属性和方法不能通过ref 直接访问。对此，React也提供了响应的hooks来解决这个问题， 就是要搭配 forwardRef 和 useImperativeHandle 来一起使用实现这个效果。
import React, { useRef, useImperativeHandle } from 'react';
import ReactDOM from 'react-dom';
const FancyInput = React.forwardRef((props, ref) => {
const inputRef = useRef();
useImperativeHandle(ref, () => ({
focus: () => {
inputRef.current.focus();
}
}));
return <input ref={inputRef} type="text" />
});
const App = props => {
const fancyInputRef = useRef();
return (
<div>
<FancyInput ref={fancyInputRef} />
<button
onClick={() => fancyInputRef.current.focus()}
>父组件调用子组件的 focus</button>
</div>
)
}
ReactDOM.render(<App />, root);
