web-dev-qa-db-ja.com

React FlatList renderItem

JSでこの種の構文を見たことがありますが、どのように機能するのか興味があります。 React FlatListのネイティブドキュメントでは、例はrenderItemを呼び出します。this._renderItemは、それがどの個々のリストアイテムで動作していることをどのように認識しますか？ ？ Example from React Native Docs

別の言い方をすれば、フラットリストでは、この同じ呼び出しを行う別の方法は次のとおりです。

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

RenderItemは、{item}が常に非構造化引数になる特別な小道具ですか？

javascriptreactjsreact-nativereact-native-flatlist
9
Julian

data prop-data propを介してデータの配列をFlatListに渡す必要があります。これはthis.props.dataで利用できます。

renderItem prop-次に、renderItem propを使用してコンテンツをレンダリングします。この関数には、オブジェクトである単一の引数が渡されます。関心のあるデータはitem keyにあるため、関数内からデストラクタリングを使用してアクセスできます。次に、そのデータを使用してコンポーネントを返します。

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

@Balasubramanianが述べたことに加えて、renderItemはcurrent itemおよびListコンポーネントをラッパーとして使用しているため、renderItem関数内で 'ListItem'コンポーネントを使用してrenderをcurrent itemのデータは次のようになります。

renderItem={({ item, index }) => {
  return (
     <ListItem
        key={index}
        title={item.name}
        onPress={ () => this.assetSelected(item) }
      />
  );
}
4
Luis-Carlos
  <FlatList
                data={['1', '2', '3', '4', '5', '6']}
                renderItem={({ item }) => (
                  <Text>{ item }</Text>
                )}
            />

出力1 2 3 4 5 6

2
Keshav Gera
 <ListItem
    data={this.state.data}
    key={(item,index)=>index.toString()}
    renderItem={({ item }) => <YourComponent item={item}> }
  />
0
Idan