解决React.forwardRef问题

在使用函数组件时，报错：Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()

解决办法：
将函数组件通过用forwradRef包装。

//子组件
function FancyButton(props, ref) (
  return <button>Test</button>;
);

export default React.forwardRef(FancyButton);

使用React.useImperativeHandle可以提供给父组件相应的内部方法进行调用

//子组件
import React, { useImperativeHandle } from "react";
function FancyButton(props, ref) (
 useImperativeHandle(ref, () => ({
    validate: () => {
    },
    params: {}
  }));
  return <button>Test</button>;
);

//父组件
import React, { useCallback, useRef } from "react";
function Parent() {
 const formRef = useRef(null);
 
 const onClick = useCallback(()=>{
 	console.log(formRef.current.params);
 	formRef.current.validate();
 }, []);
 
 return <button onClick={onClick}>父组件</button>
}