react的函數式組件中使用ref獲取到子組件的方法為undefined

我暫時遇到了兩種情況。

第一種情況：useImperativeHandle函數寫錯

useImperativeHandle的第二個參數的返回值是作為ref.current的值，但是我寫箭頭函數寫快了，忘記返回值了。

useImperativeHandle(ref, () => {foo}, [foo]) // 錯誤，這樣沒有返回值，所以ref.current為undefined

useImperativeHandle(ref, () => ({foo}), [foo]) // 正確，返回值為{foo}

第二種情況：組件一開始并未渲染(例如彈框)

這種情況我找了許久, 當一開始子組件還沒用展示的時候，在觸發某種條件才出現，這個時候綁定不到子組件，也就無法將子組件中的方法綁定到ref上面。

const Father = forward((props = {}, ref) => {
  const childrenRef = useRef()
  const [flag, setFlag] = useSafeState(false)
  const testChildren = useMemoizedFn(() => {
    childrenRef.current?.onHellow()
  })

  return (<>
    <Button onClick={() => setFlag(!flag)}>更換</Button>
    <Button onClick={testChildren}>測試孩子方法</Button>
    {flag?<Children ref={childrenRef} />:undefiend}
  </>)

})

const Children = forward((props = {}, ref) => {
  const onHellow = useMemoizedFn(() => {
    console.log('hellow world!')
  })
  
  return (<>
    我是孩子組件
  </>)
})