您现在的位置是：首页 >技术杂谈 >React 中的 forwardRef 是什么？网站首页技术杂谈

forwardRef 在 React 中的概述

forwardRef 是 React 提供的一个高阶组件，用于在组件中转发 refs。它允许你将 ref 从父组件传递到子组件的某个 DOM 元素或类组件实例。这在需要对组件内部 DOM 元素进行直接操作时非常有用，例如在实现动画、焦点控制或输入验证时。

1. 为什么使用 forwardRef

在 React 中，refs 是一种引用 DOM 元素或类组件实例的方式。通常，refs 只能用于类组件或直接的 DOM 元素。如果你有一个功能组件，并希望父组件能够访问其内部的某个 DOM 元素，你就需要使用 forwardRef。

例如，假设你有一个自定义输入组件，想要让父组件能够直接访问其底层的输入元素。此时，forwardRef 就可以派上用场。

2. 如何使用 forwardRef

使用 forwardRef 非常简单。你只需将其包装在你的组件函数外部，并且该函数将接受两个参数：props 和 ref。

基本用法示例

以下是一个使用 forwardRef 的基本示例：

import React, {
    forwardRef } from 'react';

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

在这个示例中，CustomInput 是一个功能组件，它将接收到的 ref 转发给内部的 <input> 元素。

父组件使用示例

接下来，看看父组件如何使用这个 CustomInput 组件，并访问其内部的 DOM 元素：

import React, {
    useRef } from 'react';
import CustomInput from './CustomInput';

const ParentComponent = () => {
   
  const inputRef = useRef(null);

  const focusInput = () => {
   
    if (inputRef.current) {
   
      inputRef.current.focus()