javascript - react FlatList renderItem

Question

我以前在 JS 中见过这种语法，我只是好奇它是如何工作的。在React Native Docs for FlatList ，一个示例调用 renderItem。 this._renderItem 如何知道它正在处理哪个单独的列表项？看起来 item 正在被解构，但是来自什么对象？

_renderItem = ({item}) => (
    <MyListItem
        id={item.id}
        onPressItem={this._onPressItem}
        selected={!!this.state.selected.get(item.id)}
        title={item.title}
    />
);

render() {
    return (
        <FlatList
            data={this.props.data}
            extraData={this.state}
            keyExtractor={this._keyExtractor}
            renderItem={this._renderItem}
        />
    );
}

换句话说:在 FlatList 中，进行相同调用的另一种方法可能是:

<FlatList <other props> renderItem={({item}) => (<MyListItem ....) />

renderItem 是否是一些特殊的 prop，其中 {item} 将始终是解构的 arg？

Answer 1

data prop - 需要通过data prop 将一组数据传递给FlatList。这在 this.props.data 上可用。

renderItem prop - 然后您想要使用 renderItem prop 呈现内容。该函数传递一个参数，它是一个对象。您感兴趣的数据位于 item key 上，因此您可以使用解构从函数内部访问它。然后使用该数据返回一个组件。

render() {
 return (
      <FlatList
        data={this.state.data}
        renderItem={({ item }) => (
          // return a component using that data
        )}
      />
 );
}