React FlatList renderItem

Question

我以前在JS中看到过这种语法,我只是好奇它是如何工作的.在FlatList的React Native Docs中,一个示例调用renderItem.this._renderItem如何知道它正在使用哪个单独的列表项？看起来项目正在被破坏,但是从哪个对象？

换句话说:在Flatlist中,进行同样调用的另一种方法可能是:

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

renderItem是一些特殊的道具,{item}将永远是destructured arg？

Answer 1

数据丙 -需要数据的数组传递到FlatList经由data prop。在this.props.data上可用。

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

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