为什么在useEffect中ref.current的值一直是null？

Question

项目中用到XTermjs，用了三方包装的组件，想在组件初始化之后，做一些事情，比如调用terminal.focus()聚焦

想到了用useEffect来实现如下

问题是，在这里面打印termRef.current的值一直是null，所以不会调用到terminal.focus()

这里应该怎么实现呢？把termRef.current传入到useeffect的依赖项里面去吗？

Answer 1

useEffect(() => {
    if (termRef.current) {
        termRef.current.terminal.focus();
    }
}, [termRef.current])

试试

已参与了 SegmentFault 思否社区 10 周年「问答」打卡 ，欢迎正在阅读的你也加入。

Answer 2

实测不会啊，是不是XTerm实现的问题？

import React, { useEffect } from 'react'

export default function APp() {
  const ref = React.useRef<Handler>(null)
  useEffect(() => {
    console.log(ref.current)
    if (ref && ref.current) {
      ref.current.focus()
    }
  }, [])

  return <div>
    <p>parent</p>
    <Child ref={ref} />
  </div>
}

interface Handler {
  focus: () => void;
}

const Child = React.forwardRef(function Child(props, ref) {
  React.useImperativeHandle(ref, () => {
    return {
      focus: () => {
        console.log('child focus')
      }
    }
  })
  return <div>child</div>
})

更新

更换为类组件依然没有问题

import React, { useEffect } from 'react'

export default function App() {
  const ref = React.useRef(null)
  useEffect(() => {
    console.log(ref.current)
    if (ref && ref.current) {
      ref.current.focus()
    }
  }, [])

  return <div>
    <p>parent</p>
    <Child2 ref={ref} />
  </div>
}

interface Handler {
  focus: () => void;
}

class Child2 extends React.Component<any, Handler> {
  public focus = () => {
    console.log('child focus', this.el)
  }

  public el: HTMLDivElement | null = null

  public render = () => {
    return <div ref={(el) => this.el = el}>child</div>
  }
}