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

Question

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

以下也是带有完整代码的世博会链接。

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

例子：

输入 '{ ref: (ref: any) => any; 数据：{键：字符串；标题：字符串；文本：字符串；背景颜色：字符串；}[]; renderItem: ({ item }: any) => 元素；renderPagination: (activeIndex: number) => 元素；scrollX: (scrollXList: any) => any; }' 不可分配给类型 'IntrinsicAttributes & { data: any[]; renderItem: (info: ListRenderItemInfo & { dimensions: { width: number; height: number; }; }) => ReactNode; renderSkipButton?: (() => ReactNode) | 不明确的; ... 19 更多 ...; scrollX?: ((a: any) => void) | 不明确的; } & FlatListProps<...> & { ...; }'。类型'IntrinsicAttributes & { data: any[]; 上不存在属性'ref' renderItem: (info: ListRenderItemInfo & { dimensions: { width: number; height: number; }; }) => ReactNode; renderSkipButton?: (() => 反应节点）| 不明确的; ... 19 更多 ...; scrollX?: ((a: any) => void) | 不明确的; } & FlatListProps<...> & { ...; }'。

链接：世博会

  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) => {

标签： javascripttypescriptreact-nativerefreact-ref

Answer 1

我查看了您发布的示例，useImperativeHandle并且大部分内容都是正确的。您的用法与我的其他答案中的用法略有不同，因为您的函数goToSlide需要参数。

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

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

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

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

从技术上讲，您不需要after?.，sliderRef因为 ref 对象将始终被定义。这current是可能的属性null，所以你确实需要?.after current。但是，如果红色下划线打扰您，您也可以用老式的方式检查它：

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

更新了世博链接