React使用useRef调用focus报Cannot read properties of undefined如何解决

错误原因 #

• 你没有调用useRef Hook，而是直接将函数本身赋值给了elementRef，导致elementRef不是合法的ref实例，current属性为undefined，调用focus方法自然触发类型错误。
• 普通div元素默认不具备聚焦能力，即使拿到正确的DOM实例调用focus也不会生效，需要额外配置tabIndex属性。

修复代码 #

import { useRef, useEffect } from 'react';

function CustomComponent() {
  // 调用useRef创建ref实例，初始值设为null
  const elementRef = useRef(null);
   useEffect(() => {
    const divElement = elementRef.current;
    // 增加非空判断避免边界场景报错
    if (divElement) {
      divElement.focus();
    }
  }, []);
  return (
    {/* 增加tabIndex属性让div支持聚焦，-1表示仅支持JS触发聚焦 */}
    <div ref={elementRef} tabIndex={-1}>
      I'm an element
    </div>
  );
}

额外说明 #

如果需要让该div可以通过键盘tab键切换聚焦，将tabIndex的值设置为大于等于0的整数即可，数值越小优先级越高。

内容的提问来源于stack exchange，提问作者ttsgcgiaibxhpgcowj