首页 文章

React FlatList renderItem

提问于
浏览 次
4

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

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

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

renderItem是一些特殊的道具，将永远是destructured arg？

javascript reactjs react-native react-native-flatlist

2 回答

  • 2

    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>
 );
}
    回复于
  • 3

    添加到@Balasubramanian所说的， renderItem 指向 current item 并且因为你使用 List 组件作为包装器，那么你也可以使用 renderItem 函数中的'ListItem'组件 render 的 current item 数据，如下所示：

    renderItem={({ item, index }) => {
  return (
     <ListItem
        key={index}
        title={item.name}
        onPress={ () => this.assetSelected(item) }
      />
  );
}
    回复于

相关问题