为每个元素创建一个唯一的引用,而在 SectionList/FlatList 中的 renderItem() react-native

IT技术 reactjs react-native
2021-05-10 01:51:28

这是下面的基本示例:

 renderItem: ({ item }) =>          


            <SwipeRow

              ref={(SwipeRow) => { refSwipeRow = SwipeRow }}  >

              <TouchableOpacity 
                onPress={() => {
                    refSwipeRow.closeRow()
                }
              </TouchableOpacity>
            </SwipeRow>

虽然 onPress refSwipeRow.closeRow()被调用,但它只适用于最后一个索引,从技术上讲这是正确的,因为渲染ref的同时被覆盖,最后它只保存最后一个索引引用。

如何为每个元素创建唯一的 ref。

1个回答

渲染时,FlatList/SectionList您应该为每个渲染的项目添加一个唯一的键props。您可以通过keyExtractorFlatList and SectionList. 您可以在此处阅读更多相关信息

对于您的问题,您可以将 refs 设置为具有唯一 ID 的单个对象。然后onPress被解雇,您可以使用该唯一值来关闭行。

例如

renderItem: ({ item }) => (          
              <SwipeRow
                ref={(SwipeRow) => { this.rowRefs[item.id] = SwipeRow; }}  >
                  <TouchableOpacity 
                    onPress={() => {
                      this.rowRefs[item.id].closeRow();
                    }
                  </TouchableOpacity>
              </SwipeRow>
            )

更新 要使用,this.rowRefs[item.id]您应该在组件constructor中将其声明为像这样的空对象,

constructor(props) {
  super(props);
  this.rowRefs = {};
}