在之前的react開發(fā)中，我們可以直接通過ref訪問類組件中的屬性或調(diào)用類組件的成員方法。但是如果子組件是函數(shù)式組件，則其屬性和方法不能通過ref 直接訪問。對(duì)此，React也提供了響應(yīng)的hooks來解決這個(gè)問題， 就是要搭配 forwardRef 和 useImperativeHandle 來一起使用實(shí)現(xiàn)這個(gè)效果。

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()}
      >父組件調(diào)用子組件的 focus</button>
    </div>
  )
}

ReactDOM.render(<App />, root);