React中如何获取div元素的引用？含组件与div切换场景

一、获取div元素的引用 #

在React函数组件里，我们通常用useRef钩子来获取DOM元素的引用，步骤很简单：

1. 用useRef(null)创建一个引用对象
2. 将这个引用绑定到目标div的ref属性上
3. 组件挂载完成后（比如在useEffect里），就能通过ref.current访问到真实的DOM元素了

举个实际例子：

import { useRef, useEffect } from 'react';

function Foo() {
  // 创建ref对象
  const divRef = useRef(null);

  useEffect(() => {
    // 组件挂载后，ref.current就指向对应的div元素了
    if (divRef.current) {
      console.log('拿到的div元素:', divRef.current);
      // 你可以在这里做任何DOM操作，比如修改样式
      divRef.current.style.padding = '10px';
      divRef.current.style.border = '1px solid #ccc';
    }
  }, []);

  // 把ref绑定到div上
  return <div ref={divRef}>Hey</div>;
}

二、实现动态用组件/ div包裹内容的逻辑 #

你想实现的const WrapComponent = foo ? MyComponent : div逻辑，直接这么写会有问题——因为React里的组件需要是函数或类，div是字符串标签，不能直接当成组件变量用。这里有两种简单的解决方式：

方式一：直接在JSX里用三元表达式 #

最直观的写法，直接在渲染逻辑里判断：

// 你的自定义组件
function MyComponent({ children }) {
  return <div className="my-custom-wrap">{children}</div>;
}

function ParentComponent({ foo }) {
  return (
    <>
      {foo ? (
        <MyComponent>
          {/* 这里放需要包裹的内容 */}
          <p>我被自定义组件包裹啦</p>
        </MyComponent>
      ) : (
        <div>
          {/* 同样的内容，被普通div包裹 */}
          <p>我被普通div包裹啦</p>
        </div>
      )}
    </>
  );
}

方式二：把div包装成组件变量 #

如果你一定要定义WrapComponent变量，可以把普通div包装成一个简单的函数组件，这样就能和自定义组件统一处理了：

function MyComponent({ children }) {
  return <div className="my-custom-wrap">{children}</div>;
}

function ParentComponent({ foo }) {
  // 把普通div包装成接收children的组件函数
  const DivWrap = ({ children }) => <div>{children}</div>;
  // 现在就能直接用三元表达式赋值了
  const WrapComponent = foo ? MyComponent : DivWrap;

  return (
    <WrapComponent>
      <p>不管用哪个容器，我都是被包裹的内容</p>
    </WrapComponent>
  );
}

额外补充：动态容器的引用获取 #

如果你还想获取这个动态包裹容器的引用，需要注意自定义组件的情况——默认情况下自定义组件不会传递ref，得用forwardRef来转发：

import { useRef, useEffect, forwardRef } from 'react';

// 用forwardRef让自定义组件接收ref，并传递给内部的div
const MyComponent = forwardRef(({ children }, ref) => {
  return <div ref={ref} className="my-custom-wrap">{children}</div>;
});

function ParentComponent({ foo }) {
  const wrapRef = useRef(null);
  const DivWrap = ({ children }) => <div ref={wrapRef}>{children}</div>;
  const WrapComponent = foo ? MyComponent : DivWrap;

  useEffect(() => {
    // 不管是自定义组件还是普通div，都能拿到对应的DOM元素
    if (wrapRef.current) {
      console.log('当前包裹容器:', wrapRef.current);
    }
  }, [foo]);

  return (
    <WrapComponent ref={wrapRef}>
      <p>动态容器的内容</p>
    </WrapComponent>
  );
}

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