解决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>
}
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章