React中父组件访问函数式子组件内部属性的方法

在之前的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);