forwardRef的简单使用：用于解决父组件传递ref给子组件的问题

forwardRef接收两个参数，一个是props，另一个就是传进来的ref。下面的代码以父组件传递ref给子组件，并改变子组件中input的聚焦为例：

子组件Child被forwardRef包裹，并接收两个参数，ref由父组件传递过来，并绑定到input元素的ref属性上。

import React, {useState, useRef, forwardRef } from 'react'

// 子组件Child
const Child = forwardRef((props, ref) => {
  console.log(props, ref);
  return (
    <div>
      <div>{props.status ? '聚焦' : '失焦'}</div>
      <input type="text" ref={ref} />
    </div>
  )
});

// 父组件TestForwardRef
export default function TestForwardRef() {

  const [status, setStatus] = useState(false);

  const inputRef = useRef();

  return (
    <div>
      <button onClick={() => {
        if(!status) {
          setStatus(true);
          inputRef.current.focus();
        } else {
          setStatus(false);
          inputRef.current.blur();
        }
      }}>
        点击改变聚焦
      </button>
      <Child ref={inputRef} status={status} />
    </div>
  )
}