在不带道具的Typescript中使用React.forwardRef

React.forwardRef 是 React 中的一个功能，它允许你将 ref 传递给子组件。这在某些情况下非常有用，比如当你需要直接操作 DOM 元素或者需要访问子组件的实例时。

基础概念

React.forwardRef 接受一个渲染函数作为参数，这个渲染函数会接收 props 和 ref 两个参数，并返回一个 React 节点。当你在父组件中使用 forwardRef 包装的组件并传入一个 ref 时，这个 ref 会被转发到子组件的最外层元素上。

类型

React.forwardRef 返回一个新的组件类型，这个组件类型可以像普通组件一样使用。

应用场景

当你需要访问子组件的 DOM 元素时。
当你需要调用子组件的方法时。
当你需要创建可复用的组件库时。

示例代码

下面是一个使用 TypeScript 和 React.forwardRef 的简单示例：

import React, { forwardRef, Ref } from 'react';

interface InputProps {
  value: string;
  onChange: (value: string) => void;
}

const Input = forwardRef<HTMLInputElement, InputProps>((props, ref) => {
  return (
    <input
      type="text"
      value={props.value}
      onChange={(e) => props.onChange(e.target.value)}
      ref={ref}
    />
  );
});

const App = () => {
  const inputRef: Ref<HTMLInputElement> | null = React.useRef(null);

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

  return (
    <div>
      <Input ref={inputRef} value="" onChange={() => {}} />
      <button onClick={handleClick}>Focus the input</button>
    </div>
  );
};

export default App;

在这个例子中，Input 组件通过 forwardRef 将 ref 转发到了内部的 <input> 元素上。在 App 组件中，我们创建了一个 ref 并将其传递给了 Input 组件。当点击按钮时，我们可以通过这个 ref 调用 focus 方法来聚焦输入框。