为每个元素创建一个唯一的引用，而 SectionList/FlatList 中的 renderItem() 反应原生

Question

这是下面的一个基本示例：

 renderItem: ({ item }) =>          


            <SwipeRow

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

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

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

如何为每个元素创建一个唯一的 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 中将其声明为像这样的空对象，

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