ref.current总是不确定的吗？

问题描述

我需要使用功能组件，因此不能直接使用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

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

解决方法

您需要将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