时间戳

首页 > 解决方案 > 正确键入 forwardRef 道具的通用接口

reactjs - 正确键入 forwardRef 道具的通用接口

问题描述

我在 Stack Overflow 上看到了很多关于如何在 React 中键入正向引用的答案，虽然其中一些答案适用于我的应用程序的某些部分，但在这种情况下，它们都不起作用。

我正在使用 React Native 并返回一个由 forwardRef 包装的 View 组件。我已经设法输入了 ref 参数，但我似乎无法创建一个能让 TS 编译器满意的 props 接口。我得到的错误令我感到奇怪的是，键入 props 接口会导致在将 ref 传递给组件时引发错误，但正如我所说，ref 已经键入。这是我必须要做的：

import React, { forwardRef, ReactNode, Ref } from 'react';
import { View as RNView } from 'react-native';

export type X = unknown;
export type ViewPropsType<P> = { [key: string]: P };
export type ViewRefType = Ref<ReactNode> | ReactNode;

const View = forwardRef<ViewRefType, ViewPropsType<X>>((props, ref) => (
    <RNView ref={ref} {...props} />
));

View.displayName = 'View';

export default View;

ref={ref}当我将 props 接口从 type of 更改为上述类型时，TS 编译器会在此处突出显示一个错误any：

No overload matches this call.
  Overload 1 of 2, '(props: ViewProps | Readonly<ViewProps>): View', gave the following error.
    Type 'ForwardedRef<ViewRefType>' is not assignable to type 'LegacyRef<View> | undefined'.
      Type 'MutableRefObject<ViewRefType>' is not assignable to type 'LegacyRef<View> | undefined'.
        Type 'MutableRefObject<ViewRefType>' is not assignable to type 'RefObject<View>'.
          Types of property 'current' are incompatible.
            Type 'ViewRefType' is not assignable to type 'View | null'.
              Type 'undefined' is not assignable to type 'View | null'.
  Overload 2 of 2, '(props: ViewProps, context: any): View', gave the following error.
    Type 'ForwardedRef<ViewRefType>' is not assignable to type 'LegacyRef<View> | undefined'.ts(2769)

如何在不使用任何内容的情况下键入此内容？

标签： reactjstypescriptreact-nativereact-forwardref

解决方案

推荐阅读