当前位置：首页 > React

react中高阶组件如何获取dom

2026-01-26 01:25:59React

高阶组件获取 DOM 的方法

在 React 中，高阶组件（HOC）可以通过 ref 转发或直接使用 React.forwardRef 来获取被包裹组件的 DOM 节点。以下是具体实现方式：

方法一：使用 React.forwardRef 转发 ref

通过 React.forwardRef 将 ref 传递给被包裹的组件，从而直接访问其 DOM 节点。

react中高阶组件如何获取dom

import React, { forwardRef } from 'react';

const withHOC = (WrappedComponent) => {
  const EnhancedComponent = forwardRef((props, ref) => {
    return <WrappedComponent {...props} ref={ref} />;
  });
  return EnhancedComponent;
};

// 使用示例
const MyComponent = forwardRef((props, ref) => (
  <div ref={ref}>This is a wrapped component</div>
));

const EnhancedComponent = withHOC(MyComponent);

function App() {
  const domRef = React.useRef(null);

  React.useEffect(() => {
    console.log(domRef.current); // 输出 DOM 节点
  }, []);

  return <EnhancedComponent ref={domRef} />;
}

方法二：通过 props 传递 ref

如果无法直接使用 forwardRef，可以通过自定义 prop（如 innerRef）传递 ref。

react中高阶组件如何获取dom

const withHOC = (WrappedComponent) => {
  return function HOC(props) {
    return <WrappedComponent {...props} innerRef={props.innerRef} />;
  };
};

const MyComponent = ({ innerRef }) => (
  <div ref={innerRef}>This is a wrapped component</div>
);

const EnhancedComponent = withHOC(MyComponent);

function App() {
  const domRef = React.useRef(null);

  React.useEffect(() => {
    console.log(domRef.current); // 输出 DOM 节点
  }, []);

  return <EnhancedComponent innerRef={domRef} />;
}

方法三：手动绑定 ref

在类组件中，可以通过回调 ref 或 React.createRef 手动绑定 ref。

const withHOC = (WrappedComponent) => {
  return class HOC extends React.Component {
    constructor(props) {
      super(props);
      this.domRef = React.createRef();
    }

    componentDidMount() {
      console.log(this.domRef.current); // 输出 DOM 节点
    }

    render() {
      return <WrappedComponent ref={this.domRef} {...this.props} />;
    }
  };
};

class MyComponent extends React.Component {
  render() {
    return <div>This is a wrapped component</div>;
  }
}

const EnhancedComponent = withHOC(MyComponent);