Reactnative react平面列表渲染项

发布于08月01日

我以前在JS中见过这种语法，我只是好奇它是如何工作的.在React Native Docs for FlatList中，一个示例称为renderItem.这是怎么回事_renderItem知道它正在处理哪个列表项吗？看起来项目正在被分解，但来自哪个对象？

_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是某种特殊的props ，其中{item}始终是被解构的参数吗？

推荐答案

data prop-需要通过data prop将一组数据传递给FlatList.在这个网站上有.props .数据

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

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

Reactnative react平面列表渲染项

推荐答案

React-native相关问答推荐

react 本机 TextInput 将其他元素移出屏幕

无法设置文本输入参考

何时在 React Native 中使用辅助功能 Role='link'？

导出命名空间应首先由 `@babel/plugin-proposal-export-namespace-from` 转换

Javascript setTimeout 立即在 React Native 中运行

React Native 将 base64 图像保存到相册

React Native WebView onMessage 没有做任何事情

最近 react-native 版本中的Unable to resolve moduledebuggerWorker 错误

React-navigation：增加底部标签导航的高度？

如何将抖动动画添加到视图(react-native)？

React-Native 应用程序的 Jest 测试 Animated.View

如何在 React Native 的 Modal 组件上禁用Swipe down to close？

如何使用特定目标运行 react-native run-ios

加载远程图像失败后加载本map像

react-navigation模式高度

react-native平面列表初始滚动到底部

如何隐藏 React Native NavigationBar

Jest TransformIgnorePatterns 所有 node_modules 用于 React-Native Preset

React 本机矢量图标在当前版本 0.60 上不起作用

React Native：如何动态更改值