react自定义组件ref的ts类型怎么写

在React中，我们可以通过`React.createRef()`来创建一个ref对象，然后将其绑定到自定义组件上。在TypeScript中，我们需要为自定义组件定义ref属性的类型。

例如，假设我们有一个自定义组件`MyComponent`，我们可以通过以下方式定义其ref属性的类型：

import React, { RefObject } from 'react';

interface MyComponentProps {
  // ...
  inputRef: RefObject<HTMLInputElement>;
}

class MyComponent extends React.Component<MyComponentProps> {
  // ...
  render() {
    return (
      <div>
        <input ref={this.props.inputRef} />
      </div>
    );
  }
}

在上面的例子中，我们使用了`React.RefObject`类型来定义了`inputRef`属性的类型。然后在`MyComponent`组件中，我们将`inputRef`属性绑定到了`<input>`元素的`ref`属性上。

需要注意的是，我们还需要在`MyComponentProps`中定义`inputRef`属性，否则在使用`<MyComponent>`时，TS会报错。

const App: React.FC = () => {
  const inputRef = React.createRef<HTMLInputElement>();

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

  return (
    <div>
      <MyComponent inputRef={inputRef} />
      <button onClick={handleClick}>Focus Input</button>
    </div>
  );
};

在上面的例子中，我们创建了一个ref对象`inputRef`，然后将其传递给了`MyComponent`组件的`inputRef`属性。在`App`组件中，我们定义了一个`handleClick`函数，当点击按钮时，调用`inputRef.current.focus()`来让`<input>`元素获取焦点。