使用React.cloneElement获取props.children的ref始终返回null该如何处理？

• 若<SomeChild />是自定义函数组件，默认不支持直接接收ref属性：React不会将你通过React.cloneElement传递的ref绑定到组件对应的DOM节点，仅会将其视为普通props处理，因此ref.current始终返回null。
• 若<SomeChild />是你无法修改源码的第三方组件/类组件，若组件内部没有将接收到的ref转发到内部真实DOM节点，也会出现该问题。

方案1：可修改SomeChild源码的场景 #

使用React.forwardRef包裹SomeChild，将接收的ref转发到内部根DOM节点即可，示例代码：

// 改造后的SomeChild组件
const SomeChild = React.forwardRef<HTMLElement, SomeChildProps>((props, ref) => {
  // 将ref绑定到内部真实DOM元素
  return <div ref={ref}>
    {/* 组件原有业务逻辑 */}
  </div>
})

改造后原SelectableItem的代码无需修改，即可正常获取到子组件对应的DOM引用。

方案2：无法修改SomeChild源码的场景 #

你可以在SelectableItem内给子组件外层包裹一层原生DOM元素，直接给该原生元素绑定ref：

export const SelectableItem = ({ children }: Props) => {
    const ref = useRef<HTMLDivElement>(null);

    useEffect(() => {
        console.log(ref.current); // 可正常拿到包裹层的DOM引用
    }, []);

    return <div ref={ref}>
      {children}
    </div>
};

如果你需要获取子组件内部的特定DOM节点，需要确认SomeChild是否对外暴露了对应的ref透传属性，按组件文档要求绑定对应属性即可。

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