当前位置：首页 > React

React如何访问子组件dom

2026-01-25 08:13:59React

使用 `ref` 和 `React.forwardRef`

父组件通过 ref 直接访问子组件的 DOM 节点。子组件需要使用 React.forwardRef 将 ref 转发到内部的 DOM 元素。

父组件示例：

import ChildComponent from './ChildComponent';

function ParentComponent() {
  const childRef = React.useRef(null);

  React.useEffect(() => {
    console.log(childRef.current); // 访问子组件的 DOM 节点
  }, []);

  return <ChildComponent ref={childRef} />;
}

子组件示例：

const ChildComponent = React.forwardRef((props, ref) => {
  return <div ref={ref}>子组件内容</div>;
});

通过 `useImperativeHandle` 暴露特定方法

如果只需暴露子组件的部分方法或属性，而非整个 DOM 节点，可以使用 useImperativeHandle 自定义 ref 的值。

子组件示例：

React如何访问子组件dom

const ChildComponent = React.forwardRef((props, ref) => {
  const innerRef = React.useRef(null);

  React.useImperativeHandle(ref, () => ({
    focus: () => innerRef.current.focus(),
    getRect: () => innerRef.current.getBoundingClientRect()
  }));

  return <input ref={innerRef} />;
});

父组件调用：

childRef.current.focus(); // 调用子组件暴露的方法

通过回调 `ref` 传递

子组件通过回调函数将 DOM 节点传递给父组件。

父组件示例：

React如何访问子组件dom

function ParentComponent() {
  const [childNode, setChildNode] = React.useState(null);

  const handleChildMount = (node) => {
    setChildNode(node);
  };

  return <ChildComponent onMount={handleChildMount} />;
}

子组件示例：

function ChildComponent({ onMount }) {
  return <div ref={onMount}>子组件内容</div>;
}

使用 `findDOMNode`（不推荐）

React 提供了 findDOMNode 方法，但官方已标记为废弃，建议优先使用 ref。

示例：

import { findDOMNode } from 'react-dom';

class ChildComponent extends React.Component {
  render() {
    return <div>子组件内容</div>;
  }
}

const childInstance = React.useRef(null);
const node = findDOMNode(childInstance.current);