ref本机ref属性'ref‘在'IntrinsicAttributes &’类型上不存在

Question

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

下面也是与完整代码的博览会链接。

小吃博览会报告的<AppIntroSlider />错误

​

​

示例：

​

​

输入'{ ref：(ref: any) => any；data：{ key: string；title: string；backgroundColor: string；}[]；renderItem：({ item }：any) =>元素；renderPagination：(activeIndex: number) =>元素；scrollX：(scrollXList: any) => any；}‘不能指定键入'IntrinsicAttributes &{ data: any[]；renderItem：(info&{维度：{ Type : number；}) => ReactNode；renderSkipButton?：(() => ReactNode)财政未定义；. 19；scrollX?：(a：=> void) \x未定义；}& FlatListProps<...> &{. }‘。属性'ref‘在类型'IntrinsicAttributes &{ data: any[]；renderItem：(info: ListRenderItemInfo &{维度：{ width: number；void: number；}；}) => ReactNode上不存在；renderSkipButton?：(() => ReactNode)未定义；. 19；scrollX?：(a：(a:任何) => 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) => {

Answer 1

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

Answer 2

我看了一下您在useImperativeHandle中发布的示例，并且基本上是正确的。您的用法与one 在我的另一个回答中略有不同，因为您的函数goToSlide使用参数。

在为引用的组件定义interface时，需要使用适当的参数类型定义goToSlide函数。您目前将它定义为一个不带参数的函数(goToSlide(): void)，这就是为什么您要获得错误"Type“(pageNum: number，triggerOnSlideChange?：boolean ) => void‘是不能分配到键入'() => void’”。在useImperativeHandle的线路上。

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

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

修复这两件事后，除了可选链接?.造成的错误外，您的所有错误都会消失。这是一个新的功能，我不知道如何让世博会了解它。

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

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

更新的博览链接