问题
在使用函数组件时，报错：Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()
原因
函数式组件目前是无法使用ref的
解决
将函数组件通过用 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>
}
