时间戳

首页 > 解决方案 > 为什么项目周围有花括号？

react-native-flatlist - 为什么项目周围有花括号？

问题描述

道具中花括号的用途是什么item？renderItem我试过像这样传递它

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

但它似乎不起作用。请指导我。

//Code snippet from React Native docs as below.
//url: https://facebook.github.io/react-native/docs/using-a-listview

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

export default class FlatListBasics extends Component {
  render() {
    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>
    );
  }
}

const styles = StyleSheet.create({
  container: {
   flex: 1,
   paddingTop: 22
  },
  item: {
    padding: 10,
    fontSize: 18,
    height: 44,
  },
})

标签： react-native-flatlist

解决方案

这里发生的是对象破坏；一个 ES6 特性。查一下。传递给您定义的函数的实际对象renderItem不是您的实际项目数组。例如，它实际上是其中包含您的项目的对象{a: ..., b: ... , item: /*your item*/}。对象破坏允许您将函数的参数指定为传入的实际对象中的对象之一。

例如

function printName({name}) {
  console.log(name)
}
obj = {age: 32, name: 'Alex'}

printName(obj);

这将打印“亚历克斯”

令人困惑的是，破坏语法使用大括号，JSX 解析器也是如此……但大括号的含义不同。

推荐阅读