在React函数组件中调用ReactDOM.findDOMNode返回NULL问题求助

• ReactDOM.findDOMNode仅支持传入类组件实例作为参数，你当前编写的是函数组件，函数组件不存在组件实例，函数作用域内的this在严格模式下为undefined，传入无效参数自然返回NULL。
• 额外说明：ReactDOM.findDOMNode已被官方标记为废弃API，在React 18+的严格模式下会直接抛出警告，不建议继续使用。

推荐使用useRef Hook直接绑定目标DOM元素，示例代码如下：

import { useRef, useEffect } from 'react';

export default function Component(props) {
  // 声明ref用来绑定DOM元素
  const componentRef = useRef(null);

  useEffect(() => {
    // 直接访问ref.current即可拿到对应的DOM元素
    const node = componentRef.current;
    console.log(node); // 正确输出对应DOM元素
  }, []); 

  // 给组件根元素绑定ref
  return <div ref={componentRef}>
    {/* 组件其他内容 */}
  </div>
}

• 如果需要获取子组件的DOM元素，可配合forwardRef做ref透传即可。

内容的提问来源于stack exchange，提问作者gene b.