为什么SectionList ref.current总是未定义?
我正在尝试使用 SectionList
提供的 scrollToOffset
和 scrollToIndex
。但是,在使用 ref.current
时,我使用的 SectionList
引用始终未定义。
在我的类组件中,我有以下内容:
private sectionListRef: any;
constructor(props: SampleScreenProps) {
super(props);
this.sectionListRef = null;
}
componentDidMount = (): void => {
setTimeout(() => this.scrollToSection(), 2000);
};
scrollToSection = (): void => {
// do some calculations to get the itemIndex and sectionIndex to scroll to
this.sectionListRef.scrollToLocation({
animated: false,
itemIndex,
sectionIndex,
viewPosition: 0.5
}); // this fails if the list is huge and the indices are far from the initial render location, and so moves on to onScrollToIndexFailed
};
onScrollToIndexFailed = (error) => {
// this.sectionListRef.current is always undefined in this function
this.sectionListRef.current?.scrollToOffset({
offset: error.averageItemLength * error.index,
animated: true
});
setTimeout(() => {
if (this.state.dataSet.length !== 0 && this.sectionListRef !== null) {
this.sectionListRef.current?.scrollToIndex({ index: error.index, animated: true });
}
}, 10);
};
最后,这是 SectionList
本身:
<SectionList
inverted
ref={(ref) => {
this.sectionListRef = ref;
}}
sections={mappedSections}
renderItem={this.renderItem}
renderSectionFooter={this.renderSectionFooter}
keyExtractor={(item, index) => index.toString()}
keyboardShouldPersistTaps="never"
keyboardDismissMode="on-drag"
bounces={false}
initialNumToRender={20}
onScrollToIndexFailed={this.onScrollToIndexFailed}
/>
这是什么原因?
编辑:我尝试在构造函数中执行 this.sectionListRef = React.createRef()
,但结果相同。
我知道 scrollToOffset
是 SectionList
的一部分,但其他两个滚动函数是底层虚拟化列表的一部分,但据我所知,它的工作原理应该仍然相同。
I am trying to use the scrollToOffset
and scrollToIndex
that SectionList
provides. However, the SectionList
ref I am using is always undefined when using ref.current
.
In my class component I have the following:
private sectionListRef: any;
constructor(props: SampleScreenProps) {
super(props);
this.sectionListRef = null;
}
componentDidMount = (): void => {
setTimeout(() => this.scrollToSection(), 2000);
};
scrollToSection = (): void => {
// do some calculations to get the itemIndex and sectionIndex to scroll to
this.sectionListRef.scrollToLocation({
animated: false,
itemIndex,
sectionIndex,
viewPosition: 0.5
}); // this fails if the list is huge and the indices are far from the initial render location, and so moves on to onScrollToIndexFailed
};
onScrollToIndexFailed = (error) => {
// this.sectionListRef.current is always undefined in this function
this.sectionListRef.current?.scrollToOffset({
offset: error.averageItemLength * error.index,
animated: true
});
setTimeout(() => {
if (this.state.dataSet.length !== 0 && this.sectionListRef !== null) {
this.sectionListRef.current?.scrollToIndex({ index: error.index, animated: true });
}
}, 10);
};
finally, here's the SectionList
itself:
<SectionList
inverted
ref={(ref) => {
this.sectionListRef = ref;
}}
sections={mappedSections}
renderItem={this.renderItem}
renderSectionFooter={this.renderSectionFooter}
keyExtractor={(item, index) => index.toString()}
keyboardShouldPersistTaps="never"
keyboardDismissMode="on-drag"
bounces={false}
initialNumToRender={20}
onScrollToIndexFailed={this.onScrollToIndexFailed}
/>
What is the cause of this?
Edit: I tried doing this.sectionListRef = React.createRef()
in the constructor instead, but same result.
I understand scrollToOffset
is part of SectionList
, but the other two scroll functions are part of the underlying virtualized list, but it should still work the same as far as I know.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论