React JS中如何给列表项设置ref？ref.current为null如何解决？

ref.current为null的常见原因及解决方法 #

1. useEffect执行时机早于ref绑定

空依赖的useEffect会在组件首次渲染完成后立即执行，如果子组件存在条件渲染、延迟渲染的逻辑，此时ref还未被绑定到实际DOM元素上，就会返回null。
解决方法：

• 把和ref相关的取值逻辑放到事件触发、或者明确子组件已经渲染完成的时机执行
• 给useEffect添加对应依赖，确保依赖更新后再取值

2. useMemo依赖配置错误

你当前创建ref数组的useMemo依赖为空数组，只会在组件首次初始化时生成一次ref数组。如果items是后续异步加载、或者长度会动态变化，生成的ref数组长度和实际渲染的子项数量不匹配，对应位置的ref就不会被绑定到元素上。
修改useMemo的依赖即可：

const tabRefs = useMemo(
    () => Array.from({ length: items.length }).map(() => createRef()),
    [items.length]
);

3. 子组件未用forwardRef接收ref属性

React中默认不会把ref作为普通props传递给自定义函数组件，如果你直接把ref作为props传给普通函数组件，子组件无法获取到ref，也不会将其绑定到DOM节点上。
需要用React.forwardRef包裹接收ref的子组件，示例如下：

const TabItem = React.forwardRef((props, ref) => {
  // 将接收到的ref绑定到实际的DOM元素上
  return <div ref={ref} className="tab-item">{props.label}</div>
})

4. key值不匹配

你传递ref时使用tabRefs[key]取值，如果子项的业务key不是从0开始的连续整数、或者存在key断层，你取tabRefs[0]时对应的ref可能根本没有传递给任何子组件，自然返回null。建议遍历items时用遍历的索引来绑定ref，避免业务key和ref数组索引不匹配的问题。

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