传递一个解构的对象？答案

【问题标题】：Passing in a destructured object?传递一个解构的对象？
【发布时间】：2021-01-08 17:21:54
【问题描述】：

const FlatListBasics = () => {
  return (
    <View style={styles.container}>
      <FlatList
        data={[
          {key: 'Devin'},
          {key: 'Dan'},
          {key: 'Dominic'},
          {key: 'Jackson'},
          {key: 'James'},
          {key: 'Joel'},
          {key: 'John'},
          {key: 'Jillian'},
          {key: 'Jimmy'},
          {key: 'Julie'},
        ]}
        renderItem={({item}) => <Text style={styles.item}>{item.key}</Text>}
      />
    </View>

所以今天在阅读 React Native 文档时，我遇到了这段代码，我们实际上是在传递 {item} 作为解构。
我确实阅读了一些关于解构的内容，我知道它是如何工作的，但我不明白我们如何将它作为解构传递给函数以及我们为什么这样做。

【问题讨论】：

标签： javascript react-native ecmascript-6

【解决方案1】：

我不明白我们如何将它作为解构传递给函数

它没有被传入解构。 收到时，它正在被函数解构。这段代码：

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

将renderItem 设置为一个函数。该函数接受一个参数，使用解构来挑选其item 属性。就是这样：

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

【讨论】：

【解决方案2】：

为什么：他们这样做可能只是为了减少访问对象属性的噪音。

renderItem={({item}) => <Text style={styles.item}>{item.key}</Text>}
// could also be written as
renderItem={(props) => <Text style={styles.item}>{props.item.key}</Text>}

如何：如果你了解解构，你就会明白如何：它本质上是使用语法糖从参数中的对象中提取值，而不是稍后在函数体中。

【讨论】：

【解决方案3】：

这是 flatlist 的默认行为，其中 item 是传递给渲染函数的 props 的一部分。

 renderItem={(props) => console.log(props)}

通过使用上述内容，您可以看到渲染道具内部的内容。 item 只是其中的一部分。

如果你不解构，那么你必须使用props.item而不是item。

【讨论】：