Function components cannot be given refs和useref的current一直是undefined的解决办法

刚开始的网站报错

我当时依据这个错误Function components cannot be given refs全网搜了一晚上没任何头绪，你是不是也在想是react的useRef()哪里写错了，然后深夜十二点仔细核对了几遍csdn的使用的模板代码，还是没有解决方案。

• 这是reactRef标准使用

//父组件（组件头我就没写啦  标准头就行）
const markdownRef =useRef(null)//使用useref()获得子组件内容
console.log(markdownRef)
console.log(props)
const onClick = () => {
        console.log(markdownRef)
        console.log(props.write)
    }

return (
        <>
              //使用ref将子组件内容引出
     <Markdown ref={markdownRef}/>
        </>
    );




//子组件
  useImperativeHandle(ref, () => ({//使用react的useImperativeHandle将需要传给父组件的东西抛出（ref必传）
        onSave,
        text,
        token
 }))

转变思路开始觉得是useref的current一直是undefined的问题

我和你一样也觉得Function components cannot be given refs已经无解了，想砸电脑了，然后发现打印的console.log(markdownRef)中的current属性一直为null或者undefined

然后我又开始以useref的current一直是undefined为关键词全网搜索，最后得出的结论为需要在子组件上加上forwardRef包裹才能使用子对父通信，然后我天真的又以为我可以了

const Md: React.FC = forwardRef((props: any, ref) => {
    //使用react的useImperativeHandle将需要传给父组件的东西抛出（ref必传）用useImperativeHandle暴露一些外部ref能访问的属性
    useImperativeHandle(ref, () => ({
        onSave,
        text,
        token
    }))
    return <Editor
        modelValue={text}
        onChange={setText}
        onUploadImg={onUploadImg}
        theme={"light"}
        onSave={onSave}
        pageFullscreen={false}
        showCodeRowNumber={true}
        /*不知道怎么用这写
        格式错误方法
        sanitize={(html:string)=>(DOMPurify)};
         自定义工具栏
         defToolbars?: Array<ReactElement>;
         */
        codeStyleReverse={true}
        autoFocus={true}
        className={"markdown"}
    />;
})

可现实是Function components cannot be given refs依旧存在，useref的current一直是undefined

开始醒悟，一定是connect的问题

React的高阶组件HOC，可以理解成在低阶组件上进行一些封装。高阶组件HOC如果不做一些特殊处理，是无法直接访问低阶组件实例的，要想通过ref访问低阶组件实例，调用connect时，需要传递参数{forwardRef : true}。

解决方案

export default connect(({write}) => ({write}),
    null,
    null,
    {forwardRef: true}
)(Md)

如果使用了高阶组件，请一定要这样写！！！！！不然你就会像我一样被折磨一天