揭秘跨组件Ref传递的奥秘：从Class到函数组件再到HOC的高效运用

2024-02-18 21:46:13

在React开发中，Ref是一种强大的工具，可以帮助我们访问和操作DOM元素。在Class组件中，可以使用ref属性来获取DOM元素的引用，而在函数组件中，可以使用useRef钩子来实现同样的功能。

在跨组件Ref传递时，我们需要考虑两种情况：

父组件是Class组件，子组件是函数组件
父组件是函数组件，子组件是Class组件

情况一：父组件是Class组件，子组件是函数组件

// 父组件（Class）
class Parent extends React.Component {
  constructor(props) {
    super(props);

    this.myRef = React.createRef();
  }

  render() {
    return (
      <Child ref={this.myRef} />
    );
  }
}

// 子组件（函数）
const Child = React.forwardRef((props, ref) => {
  console.log(ref); // 输出：{current: DOM元素}

  return (
    <div>子组件</div>
  );
});

在上面的代码中，父组件是一个Class组件，子组件是一个函数组件。父组件通过ref属性将Ref传递给子组件，子组件通过useRef钩子来接收Ref。在子组件中，可以通过ref.current来访问DOM元素。

情况二：父组件是函数组件，子组件是Class组件

// 父组件（函数）
const Parent = () => {
  const myRef = useRef();

  return (
    <Child ref={myRef} />
  );
};

// 子组件（Class）
class Child extends React.Component {
  constructor(props) {
    super(props);

    this.myRef = props.ref;
  }

  render() {
    return (
      <div>子组件</div>
    );
  }
}