React native ref Property 'ref' 在类型'IntrinsicAttributes & 上不存在

Question

我收到以下错误，但我无法弄清楚如何解决它，有人可以帮助我。

下面也是expo上的完整代码链接。

零食博览会报告的<AppIntroSlider /> 错误

例子：

输入 '{ ref: (ref: any) => any;数据：{键：字符串；标题：字符串； 文本：字符串；背景颜色：字符串； }[];渲染项目：（{项目}： 任何）=> 元素； renderPagination: (activeIndex: number) => 元素； scrollX: (scrollXList: any) => any; }' 不可分配给类型 'IntrinsicAttributes & {数据：任何[];渲染项目：（信息： ListRenderItemInfo & { 尺寸：{ 宽度：数字；高度： 数字; }; }) => 反应节点； renderSkipButton?: (() => ReactNode) | 不明确的; ... 19 更多 ...; scrollX?: ((a: any) => void) |不明确的; } & FlatListProps<...> & { ...; }'。属性 'ref' 不存在于 类型'IntrinsicAttributes & {数据：任何[];渲染项目：（信息： ListRenderItemInfo & { 尺寸：{ 宽度：数字；高度： 数字; }; }) => 反应节点； renderSkipButton?: (() => ReactNode) | 不明确的; ... 19 更多 ...; scrollX?: ((a: any) => void) |不明确的; } & FlatListProps<...> & { ...; }'。

链接：expo

  const slider = useRef(null);
  ...
  <AppIntroSlider
      ref={(ref: any) => (slider.current = ref)}
      ...

type ItemTProps<ItemT> = {
  data: ItemT[];
  renderItem: (
    info: ListRenderItemInfo<ItemT> & {
      dimensions: { width: number; height: number };
    }
  ) => React.ReactNode;
  renderSkipButton?: () => React.ReactNode;
  renderNextButton?: () => React.ReactNode;
  renderDoneButton?: () => React.ReactNode;
  renderPrevButton?: () => React.ReactNode;
  onSlideChange?: (a: number, b: number) => void;
  onSkip?: () => void;
  onDone?: () => void;
  renderPagination?: (activeIndex: number) => React.ReactNode;
  activeDotStyle: ViewStyle;
  dotStyle: ViewStyle;
  dotClickEnabled: boolean;
  skipLabel: string;
  doneLabel: string;
  nextLabel: string;
  prevLabel: string;
  showDoneButton: boolean;
  showNextButton: boolean;
  showPrevButton: boolean;
  showSkipButton: boolean;
  bottomButton: boolean;
  scrollX?: (a: any) => void;
} & FlatListProps<ItemT>;

const AppIntroSlider: FunctionComponent<ItemTProps<any>> = ({
  data,
  renderItem,
  renderSkipButton,
  renderNextButton,
  renderDoneButton,
  renderPrevButton,
  onSlideChange,
  onSkip,
  onDone,
  renderPagination,
  activeDotStyle = {
    backgroundColor: 'rgba(255, 255, 255, .9)',
  },
  dotStyle = {
    backgroundColor: 'rgba(0, 0, 0, .2)',
  },
  dotClickEnabled = true,
  skipLabel = 'Skip',
  doneLabel = 'Done',
  nextLabel = 'Next',
  prevLabel = 'Back',
  showDoneButton = true,
  showNextButton = true,
  showPrevButton = false,
  showSkipButton = false,
  bottomButton = false,
  extraData,
  scrollX,
  ...otherProps
}: any) => {

Answer 1

当您登录 slider.current ref 时，它会显示 null，因为您的 AppIntroSlider 组件是功能组件，不支持这种方式。您有两种解决方案，将 AppIntroSlide 更改为类组件，它会正常工作，或者使用 forwardRef。

Answer 2

我查看了您使用useImperativeHandle 发布的示例，并且您基本上是正确的。您的用法与 in my other answer 的用法略有不同，因为您的函数 goToSlide 接受参数。

当您为引用的组件定义interface 时，您需要使用适当的参数类型定义goToSlide 函数。您当前将其定义为不带参数的函数 (goToSlide(): void)，这就是为什么您收到错误 "Type '(pageNum: number, triggerOnSlideChange?: boolean | undefined) => void' is not assignable to输入 '() => void'。” 与useImperativeHandle 对应。

export interface MyRef {
  goToSlide(pageNum: number, triggerOnSlideChange?: boolean): void;
}

MyCustomComponentProps 上的一堆道具应该被定义为可选的。您已经为它们设置了默认值。

修复这两个问题后，所有错误都会消失，除了由可选链接 ?. 引起的错误。这是一个新功能，我不知道如何让 Expo 理解它。

您在技术上需要在sliderRef 之后的?.，因为总是会定义 ref 对象。 current 属性可能是null，因此您确实需要?. 在current 之后。但是如果红色下划线打扰您，您也可以使用老式的方式检查它：

const prev = (activeIndex: number): void => {
  if ( sliderRef.current ) {
    sliderRef.current.goToSlide(activeIndex - 1, true);
  }
};

Updated expo link