理解 React Native <FlatList /> 中 renderItem 属性中的解构

Question

我在网上看到了以下 React Native 代码：

import React, { useState } from 'react';
import { StyleSheet, Text, View, FlatList } from 'react-native';

export default function App() {
  const [people, setPeople] = useState([
    { name: 'shaun', id: '1' },
    { name: 'yoshi', id: '2' },
    { name: 'mario', id: '3' },
    { name: 'luigi', id: '4' },
    { name: 'peach', id: '5' },
    { name: 'toad', id: '6' },
    { name: 'bowser', id: '7' },
  ]);

  return (
    <View style={styles.container}>

      <FlatList 
        numColumns={2}
        keyExtractor={(item) => item.id} 
        data={people} 
        renderItem={({item}) => ( 
          <Text style={styles.item}>{item.name}</Text>
        )}
      />

    </View>
  );
}

我不太了解与 renderItem 属性相关的片段。为什么我们要使用解构语法 {item} 。这也是一种对象解构语法（使用花括号），但在对象解构中我们使用键作为变量名。所以恐怕我完全无法理解下面的代码片段。

<FlatList 
        numColumns={2}
        keyExtractor={(item) => item.id} 
        data={people} 
        renderItem={({item}) => ( 
          <Text style={styles.item}>{item.name}</Text>
        )}

如有任何指导，我们将不胜感激。

Answer 1

这个...

renderItem={({item}) => ( 
  <Text style={styles.item}>{item.name}</Text>
)}

实际上是指....

renderItem={(props) => ( 
  <Text style={styles.item}>{props.item.name}</Text>
)}

这种技术称为对象销毁查看更多信息 - https://medium.com/podiihq/destructuring-objects-in-javascript-4de5a3b0e4cb

理解 React Native <FlatList /> 中 renderItem 属性 中的解构

understanding destructuring in renderItem property in <FlatList /> in React Native

javascript

destructuring

react-native

理解 React Native <FlatList /> 中 renderItem 属性中的解构