reactjs - ref.current 总是未定义？

Question

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

我想在父组件上触发子组件的功能......有人可以帮助我吗？

Answer 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