如何将SectionList的scrollToLocation传递给子组件？

Question

我正在构建一个React Native应用程序，该应用程序具有用户需要填写的流程指南。当用户选择了一个选项时，我想将他在屏幕上滚动到新选项出现的位置。

要实现这一点，我需要在我的按钮onClick上提供SectionList＆＃39; scrollToLocation功能。

 42 const sectionData = [
 43   {
 44     data: [
 45       {
 46         key: "1",
 47         program:  [
 48           <Question
 49             key={1}
 50             onAnswerSubmit={() => {
 51               scrollToLocation(1);
       /* 
           How do I access scrollToLocation from 
           SectionList and pass it along as a prop here?
        */
 52             }}
 53           />,
 54           <Question
 55             key={2}
 56             onAnswerSubmit={() => {
 57               scrollToLocation(1);
 58             }}


130   public render() {
131
132     return (
133       <SectionList
135         sections={ sectionData }
136         renderItem={ renderItem }
137         renderSectionHeader={ sectionHeader }
138         keyExtractor={ keyExtractor }
139       >
140       </SectionList>

Question.tsx

 28   public render() {
 29     return (
 30       <Question
 31         {...this.props}
 32         onPress={this.props.onAnswerSubmit}
 33       />
 34     );

Answer 1

您可以像这样添加ref到SectionList

ref = "foo"

并将其命名为

this.refs.foo.scrollToLocation(params);

或

ref = {ref => this.sectionListRef = ref}

并将其命名为

this.sectionListRef.scrollToLocation(params);