Question

在此特定示例中

   const rows = [
  {id: 0, text: 'View'},
  {id: 1, text: 'Text'},
  {id: 2, text: 'Image'},
  {id: 3, text: 'ScrollView'},
  {id: 4, text: 'ListView'},
]

const extractKey = ({id}) => id

export default class App extends Component {

  renderItem = ({item}) => {
    return (
      <Text style={styles.row}>
        {item.text}
      </Text>
    )
  }

  render() {
    return (
      <FlatList
        style={styles.container}
        data={rows}
        renderItem={this.renderItem}
        keyExtractor={extractKey}
      />
    );
  }
}

const styles = StyleSheet.create({
  container: {
    marginTop: 20,
    flex: 1,
  },
  row: {
    padding: 15,
    marginBottom: 5,
    backgroundColor: 'skyblue',
  },
})

在http://www.reactnativeexpress.com/flatlist提供

为什么为renderItem分配了一个接受（{item}）而不是（item）的函数？箭头函数不是应该通过在“（）”中接受参数来起作用吗？ “ {}”在这里的意义是什么？删除它们会导致每个FlastList项目中的文本为空。

Answer 1

这是ES6的一项功能，称为解构

解构赋值语法是一个JavaScript表达式，使从数组解压缩值或从解压缩属性成为可能对象，分成不同的变量。

Source

基本上，这是一种直接访问作为函数参数传递的对象内的键的快捷方式语法。

示例：

var cName="MIKE";
customerDB({ "custName":{like:cName}}).each(function (record,recordnumber) {

为什么在与本机列表

1 个答案: