为SectionList / FlatList中的renderItem（）做出本机反应时，为每个元素创建一个唯一的引用

Question

这是一个基本的例子：

 renderItem: ({ item }) =>          


            <SwipeRow

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

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

虽然onPress refSwipeRow.closeRow（）被调用，但它只适用于最后一个索引，从技术上讲它是正确的，因为渲染 ref 的同时被覆盖并且在结束它只保存最后一个索引引用。

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

Answer 1

渲染FlatList/SectionList时，您应该为每个渲染项添加唯一的键道具。您可以使用keyExtractor支持FlatList and SectionList来实现此目的。您可以更多地了解here。

对于您的问题，您可以将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中的firs声明为此类空对象，

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