React 中 React Native 的 FlatList 等价物

Question

React 中是否有等效于 React Native 的 FlatList 组件？在 React Native 中构建了移动应用程序后，我现在将其转换为 Web 应用程序的 React。 （考虑过使用 react-native-web ，但决定不使用，主要是因为我想学习 React。）

如果没有等效项，我一直在考虑仅使用 map() 通过我构建的 Item 组件呈现所有项目，也如文档和此 SO 问题 中 所示。

原文由 avriis 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

没有像 react-native 那样的特定组件来做这种事情，所以我通常只使用 map() 来实现这种事情。

但如果它是可重用的，您肯定可以为自己创建一个列表组件，这样您就不会每次都为同一个列表编写 map() 函数。

有点像这样：

 function Item(props) {
   return <li>{props.value}</li>;
}

function MyList(items) {
   return (
    <ul>
      {items.map((item) => <Item key={item.key} value={item} />)}
    </ul>
  );
}

原文由 Andrei Olar 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

有一个名为 flatlist-react (npm install flatlist-react) 的反应组件，您可以使用它来呈现如下列表：

 <FlatList list={[1, 2, 3]} renderItem={item => <li>{item}</li>}/>

它还为您处理诸如排序、分组、过滤和布局样式之类的事情。

项目：

https://github.com/ECorreia45/flatlist-react

原文由 ecorreia 发布，翻译遵循 CC BY-SA 4.0 许可协议