React FlatList renderItem

Question

私はJSのこの種の構文を以前から見てきましたが、私はそれがどのように動作するのか不思議です。 FlatListのためのReact Native Docsでは、renderItemを呼び出します。 this._renderItemは、それがどのような個別のリスト項目を処理しているかを知っていますか？それはアイテムが破壊されているようですが、どのオブジェクトからですか？言い換える

：Flatlistで、これと同じ呼び出しを行うための別の方法は次のようになります。

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

は{}項目が常に破壊さargになりますのRenderItemいくつかの特別な小道具ですか？ data prop介しFlatListにデータの配列を渡す必要 -

Answer 1

データはを支えます。それはthis.props.dataで利用可能です。

renderItem prop - 次にrenderItemのプロペラでコンテンツをレンダリングします。この関数には単一の引数が渡されます。これはオブジェクトです。あなたが興味を持っているデータはitem keyにありますので、関数内からそのデータにアクセスするために構造を解除することができます。その後、そのデータを使用してコンポーネントを返します。

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