将React forwardRef与Typescript通用JSX参数一起使用

  • Z时代
  • 2024-01-10
  • 分类：问答

给定以下使用泛型类型参数的类型化React组件，我该如何将其包装在React的新forwardRefAPI中？

type Props<T> = {
  forwardedRef?: Ref<HTMLInputElement>
  ...
}
class GenericComponent<T> extends Component<Props<T>> {
  ...
}
const ComponentWithRef = forwardRef<HTMLInputElement, Props<T>>((props, ref) => (
  <StringInput<T> {...props} forwardedRef={ref} />
))

上面的方法无法定义T泛型。

回答：

因此，为了扩大问题范围，这实际上是关于在更高阶函数中保留泛型类型的问题。的以下用法forwardRef将正确类型检查（在中3.0.1）

const SelectWithRef = forwardRef(<Option extends string>(props: Props<Option>, ref?: Ref<HTMLSelectElement>) =>
  <Select<Option> {...props} forwardedRef={ref} />);

但是，Option泛型会立即解析为string，而不是保留为泛型。因此，以下内容不会进行类型检查

const onChange: (value: 'one' | 'two') => void = (value) => console.log(value);
<SelectWithRef<'one' | 'two'>
              ^^^^^^^^^^^^^^^ [ts] Expected 0 type arguments, but got 1
  value="a"
  options={['one', 'two']}
  onChange={onChange}
           ^^^^^^^^^^ [ts] Type 'string' is not assignable to type '"one" | "two"'
/>

在此Typescript发行凭单中跟踪了相关的发行。

以上是 将React forwardRef与Typescript通用JSX参数一起使用 的全部内容， 来源链接： utcz.com/qa/435534.html

回到顶部