Question

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,
  },
})

Answer 1

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

例如

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

printName(obj);

这将打印'Alex'

令人困惑的是，析构语法使用大括号，而JSX解析器也是如此...但是大括号表示不同的意思。

Answer 2

这是提取item的值的方法，这就是JSX的工作方式。如果只有item，即db.collection.find({ "hotel_id": 45, "plans.plan_type": {$in : ["AP", "EP"]}, "plans.sub_plans.channels.prices.occupancy": 1, "plans.sub_plans.channels.is_active": false, "plans.sub_plans.channels.status": "Pending" })，它将把item渲染为输出，但是如果您想显示item的值，假设<Text>item</Text>，然后显示item =50，那么50将显示。

为什么项目周围有花括号？

2 个答案: