如何引用React组件返回的DOM元素，实现类似原生JS的元素操作

React 基于虚拟DOM实现，你直接写的JSX元素是虚拟DOM对象，不是浏览器真实DOM，要获取真实DOM必须使用官方提供的ref机制，这是目前最简单且唯一符合React设计规范的方案，没有更简化的替代方式。

你之前写法报错的核心原因是，赋值的sliderContainer是React虚拟DOM对象，不是浏览器的真实DOM节点，不具备getBoundingClientRect等原生DOM方法。

具体实现步骤 #

1. 从React中引入useRef和useEffect钩子
2. 声明ref变量绑定到目标DOM元素
3. 在组件挂载完成的生命周期（useEffect回调）中获取真实DOM并执行相关操作

完整可运行代码示例 #

import React, { useRef, useEffect } from "react";
import "./myComp.css";

function MyComp(props) {
  // 声明ref对象，初始值设为null
  const sliderRef = useRef(null);

  function myFunc(element) {
    // 判空避免未挂载时调用报错
    if (!element) return null;
    return element.getBoundingClientRect();
  }

  // 组件挂载完成后才能拿到真实DOM
  useEffect(() => {
    // sliderRef.current 就是对应的真实DOM元素，和原生JS获取的element完全一致
    const elementDimensions = myFunc(sliderRef.current);
    // 拿到尺寸后可在这里执行后续逻辑
    console.log(elementDimensions);
  }, []); // 空依赖数组表示只在组件第一次挂载完成后执行

  // 把ref绑定到对应的DOM元素上
  return (
    <div ref={sliderRef} className="slider-container" style={props.styles}>
        <div className="myChild"></div>
    </div>
  );
}

export default MyComp;

关键注意点 #

• 不要在组件渲染的同步逻辑中直接访问sliderRef.current，此时DOM还没渲染到页面，值为null
• 如果需要在用户交互（比如点击、滚动）时获取DOM尺寸，直接在事件回调中访问sliderRef.current即可，不需要写在useEffect里
• 如果你需要把DOM引用传递给其他函数，直接传sliderRef.current即可，和原生JS中传递DOM元素的用法完全一致

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