用ref操作DOM：（四）forwardRef访问自己组件的DOM节点

前端

2023-11-29 01:07:56

前言

在React中，我们可以使用ref来获取组件实例或DOM节点的引用，以方便对组件或DOM节点进行操作。

ref有两种形式：

字符串 ref：这种形式的 ref 是一个字符串，指向组件实例或DOM节点的ID。
函数 ref：这种形式的 ref 是一个函数，接收两个参数：组件实例和DOM节点。

forwardRef

在某些情况下，我们需要访问组件的DOM节点引用，但我们又不希望直接使用字符串 ref 或函数 ref。

这个时候，我们可以使用forwardRef。

forwardRef是一种更高阶的API，它允许我们在组件内部使用ref，并将其传递给父组件。

使用forwardRef访问自己组件的DOM节点

以下是如何使用forwardRef访问自己组件的DOM节点：

首先，我们需要定义一个组件，并使用forwardRef将其包裹。
然后，我们需要在组件内部使用ref，并将其传递给父组件。
最后，我们在父组件中就可以使用ref来访问组件的DOM节点了。

示例

以下是一个使用forwardRef访问自己组件的DOM节点的示例：

import React, { forwardRef } from 'react';

const MyInput = forwardRef((props, ref) => {
  return (
    <input
      ref={ref}
      {...props}
    />
  );
});

const ParentComponent = () => {
  const inputRef = React.createRef();

  return (
    <div>
      <MyInput ref={inputRef} />
      <button onClick={() => {
        console.log(inputRef.current);
      }}>
        获取DOM节点
      </button>
    </div>
  );
};