反应 ForwardRef 打字稿

介绍

在编写 React 组件时，我们有时需要在组件中使用其他组件，但这些组件可能还未定义。这时候就需要使用 forwardRef 函数。forwardRef 允许我们将父组件的 ref 属性传递给子组件，以便在父组件中可以访问子组件的 DOM 元素或组件实例。

语法

const Component = forwardRef((props, ref) => {
  // ...
})

• Component：用于跨越组件边界访问子组件的组件。
• props：组件属性。
• ref：父组件传递的 ref。

例子

import React, { forwardRef } from 'react';

const ChildComponent = forwardRef((props, ref) => {
  return (
    <input type="text" ref={ref} />
  );
});

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

  const handleButtonClick = () => {
    inputRef.current.focus();
  }

  return (
    <div>
      <ChildComponent ref={inputRef} />
      <button onClick={handleButtonClick}>Focus Input</button>
    </div>
  );
};

在这个例子中，我们通过 forwardRef 函数在 ChildComponent 中获取父组件 ParentComponent 传递的 ref，并将其赋值给一个 <input> 元素。在 ParentComponent 中，我们通过 useRef 创造了一个引用，然后将其传递给 ChildComponent。当点击按钮时，我们可以使用 inputRef.current 来访问子组件 ChildComponent 中的 <input> 元素，并调用 .focus() 方法使其获取焦点。这证明了 forwardRef 的用武之地。

结论

forwardRef 是一个非常有用的 React 函数，它允许我们轻松地访问子组件所使用的 DOM 元素或组件实例。它在 React 中的使用非常平凡，但对于 React 开发人员来说，它是一个至关重要的工具。