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

Posted 2023-02-21

【中文标题】React native ref Property \'ref\' 在类型\'IntrinsicAttributes & 上不存在

【英文标题】：React native ref Property 'ref' does not exist on type 'IntrinsicAttributes &React native ref Property 'ref' 在类型'IntrinsicAttributes & 上不存在

【发布时间】：2021-03-17 12:30:23

【问题描述】：

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

下面也是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) => 

【问题讨论】：

你的应用在世博小吃中运行良好！

@Aymen：单击时下一个按钮不起作用，问题是我必须使用对模块的引用，我说的是那个问题。不知道我有没有说清楚。

@WaheedAkhtar：请问您能否举个例子？在应用程序内部，我无法访问 goToSlide 方法，我应该通过 ref 访问该方法。

【参考方案1】：

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

【讨论】：

如果我想使用 forwardRef 应该怎么做？

我应该改变什么？

看这个解释levelup.gitconnected.com/…

如果我没有通过学习你给我的指南成功，我可以问你是否可以帮助我。了解我错在哪里并能够使其发挥作用非常重要。

我收到以下错误：__slider$current.goToSlide is not a function. (In '_slider$current.goToSlide(activeIndex + 1, true)', '_slider$current.goToSlide' is undefined) 但我不明白我做错了什么。链接：snack.expo.io/vsrGzYEPA

【参考方案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

【讨论】：

谢谢你，我依靠你的例子来尝试解决问题。我可以问你任何我有的和没能解决的问题吗？