ref.current 总是未定义？答案

【问题标题】：ref.current is always undefined?ref.current 总是未定义？
【发布时间】：2020-10-27 14:53:41
【问题描述】：

我需要使用功能组件，所以我不能直接使用 useRef。这是我的代码：


import React,{forwardRef,useImperativeHandle,useRef,useEffect} from "react";
import "./style.css";

export default function App() {


  const ref_ = useRef();

useEffect(()=>{
    console.log(ref_)

})
  console.log(ref_)

  return (
    <div>
         <Demo/>
    </div>
  );
}

const Demo = forwardRef((props,ref)=>{

useImperativeHandle(ref,()=>({
  toggle(){
    console.log(123);
  }
}))

  return(
    <div ref={ref}>1234</div>

  )
})

在线代码： https://stackblitz.com/edit/forwardref-z68drh?file=src/App.js

我想在父组件上触发子组件的功能...谁能帮帮我？

【问题讨论】：

标签： reactjs react-forwardref

【解决方案1】：

您需要将ref 本身传递给Demo 组件：

function App() {
  const ref = useRef();
  return <Demo ref={ref}/>;
}

那么你可以使用ref.current.toggle()，因为useImperativeHandle。

https://stackblitz.com/edit/forwardref-z68drh-epz2xf?file=src/App.js

【讨论】：