react 中结合ts 使用refs

在 React 中结合 TypeScript 使用 Refs 可以通过 `React.RefObject` 接口来定义 Ref 类型，具体步骤如下：

1. 首先，在组件中定义一个 Ref 对象：

import React, { useRef } from 'react';

interface MyComponentProps {
  // props
}

const MyComponent: React.FC<MyComponentProps> = (props) => {
  const inputRef = useRef<HTMLInputElement>(null);

  // ...
};

这里我们定义了一个名为 `inputRef` 的 Ref 对象，它的类型是 `React.RefObject<HTMLInputElement>`，指向一个 input 元素。

2. 将 Ref 对象传递给组件中的元素或组件：

return (
  <div>
    <input type="text" ref={inputRef} />
  </div>
);

这里我们将 `inputRef` 传递给了 input 元素的 `ref` 属性，这样在组件渲染完毕后，我们就可以通过 `inputRef.current` 来访问这个 input 元素了。

3. 在组件中使用 Ref 对象：

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

return (
  <div>
    <input type="text" ref={inputRef} />
    <button onClick={handleClick}>Focus</button>
  </div>
);

这里我们定义了一个 `handleClick` 方法，当用户点击按钮时，调用这个方法，它会将焦点聚焦到 input 元素上。通过 `inputRef.current` 可以获取当前 input 元素的引用，然后调用 `focus()` 方法即可聚焦。

以上就是在 React 中结合 TypeScript 使用 Refs 的基本步骤。需要注意的是，当使用 Refs 时，要确保对 Ref 对象的访问是安全的，即先检查 `ref.current` 是否为 null，然后再进行操作，以避免出现运行时错误。