JZTXT

react的函数式组件中使用ref获取到子组件的方法为undefined

发布时间 2023-06-27 10:54:50作者: 卿六

我暂时遇到了两种情况。

第一种情况：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 (<>
    我是孩子组件
  </>)
})