reactjs - ref 对象可能在本机反应中未定义

Question

我有一个部分列表，我想实现一个解决方案，以便在单击按钮时自动滚动到某个部分。首先，我在我的部分列表中添加了一个参考，但它给出了一个错误Object is possibly 'undefined'（我正在为我的应用程序使用打字稿）。

<SectionList
          sections={groupActivities}
          keyExtractor={(item, index) => index.toString()}
          initialNumToRender={5}
          ref={(component) => {
            this.sectionList = component;    // This is the line i'm getting the error (in 'this')
          }}
          .........

我正在尝试按如下方式使用我的参考

function scrollToSection() {
    this.sectionList.scrollToLocation({
      sectionIndex: 0,
      itemIndex: 5,
      viewPosition: 1,
      // viewOffset: 50,
    });
  }

我提到的文件状态像我一样使用参考，但我无法在这里找出问题。

PS：

这是我的新代码

<SectionList
          sections={groupActivities}
          keyExtractor={(item, index) => index.toString()}
          initialNumToRender={5}
          ref={sectionList}

和

const sectionList = useRef<SectionList>();
  function scrollToSection() {
    sectionList.current?.scrollToLocation({
      sectionIndex: 0,
      itemIndex: 5,
      viewPosition: 1,
    });
  }

我收到一个类型错误ref={sectionList}，如下所示

(JSX attribute) ClassAttributes<SectionList<any, DefaultSectionT>>.ref?: string | ((instance: SectionList<any, DefaultSectionT> | null) => void) | React.RefObject<SectionList<any, DefaultSectionT>> | null | undefined
No overload matches this call.
  Overload 1 of 2, '(props: SectionListProps<any, DefaultSectionT> | Readonly<SectionListProps<any, DefaultSectionT>>): SectionList<...>', gave the following error.
    Type 'MutableRefObject<SectionList<any, DefaultSectionT> | undefined>' is not assignable to type 'string | ((instance: SectionList<any, DefaultSectionT> | null) => void) | RefObject<SectionList<any, DefaultSectionT>> | null | undefined'.
      Type 'MutableRefObject<SectionList<any, DefaultSectionT> | undefined>' is not assignable to type 'RefObject<SectionList<any, DefaultSectionT>>'.
        Types of property 'current' are incompatible.
          Type 'SectionList<any, DefaultSectionT> | undefined' is not assignable to type 'SectionList<any, DefaultSectionT> | null'.
            Type 'undefined' is not assignable to type 'SectionList<any, DefaultSectionT> | null'.
  Overload 2 of 2, '(props: SectionListProps<any, DefaultSectionT>, context: any): SectionList<any, DefaultSectionT>', gave the following error.
    Type 'MutableRefObject<SectionList<any, DefaultSectionT> | undefined>' is not assignable to type 'string | ((instance: SectionList<any, DefaultSectionT> | null) => void) | RefObject<SectionList<any, DefaultSectionT>> | null | undefined'.
      Type 'MutableRefObject<SectionList<any, DefaultSectionT> | undefined>' is not assignable to type 'RefObject<SectionList<any, DefaultSectionT>>'.ts(2769)
index.d.ts(143, 9): The expected type comes from property 'ref' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<SectionList<any, DefaultSectionT>> & Readonly<...> & Readonly<...>'
index.d.ts(143, 9): The expected type comes from property 'ref' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<SectionList<any, DefaultSectionT>> & Readonly<...> & Readonly<...>'

标签： reactjstypescriptreact-nativerefuse-ref