react中 在tsx规范中组件使用 React.forwardRef后，在使用组件时获取ref为null。给出解决方案

当使用 `React.forwardRef` 包装组件时，可以通过 `React.forwardRef` 函数的第二个参数来获取传递给组件的 `ref`。在组件中，需要使用 `React.useImperativeHandle` 函数来定义可暴露给父组件的属性和方法。这些属性和方法将绑定到传递给组件的 `ref` 上。

例如，假设我们有一个 `MyComponent` 组件，它使用了 `React.forwardRef`，我们想要将传递给 `MyComponent` 的 `ref` 绑定到 `input` 元素上，可以这样实现：

import React from 'react';

interface MyComponentProps {
  // ...
}

interface MyComponentRef {
  // ...
}

const MyComponent = React.forwardRef<MyComponentRef, MyComponentProps>((props, ref) => {
  const inputRef = React.useRef<HTMLInputElement>(null);

  React.useImperativeHandle(ref, () => ({
    focus() {
      inputRef.current?.focus();
    },
    // ...
  }));

  return (
    <div>
      <input ref={inputRef} />
      {/* ... */}
    </div>
  );
});

export default MyComponent;

在这个例子中，`MyComponent` 组件包装了一个 `input` 元素，并使用 `useRef` 创建了一个 `inputRef` 对象，将其绑定到 `input` 元素上。使用 `useImperativeHandle`，将 `focus` 方法绑定到传递给组件的 `ref` 上。这样，外部就可以通过 `ref` 来调用 `focus` 方法。

使用组件时，需要使用 `React.createRef` 来创建一个 `ref` 对象，将其传递给 `MyComponent` 组件的 `ref` 属性。这样，`ref` 就可以正确地绑定到 `input` 元素上了。

import React from 'react';
import MyComponent from './MyComponent';

function App() {
  const myComponentRef = React.createRef<MyComponentRef>();

  function handleClick() {
    myComponentRef.current?.focus();
  }

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

export default App;

这样就能正确地获取 `ref` 了，同时可以通过 `ref` 调用 `focus` 方法。