React 中是否有与 React Native 中的 FlatList 组件等效的组件？在 React Native 中构建了一个移动应用程序后，我现在将其转换为 React 用于 Web 应用程序。 （考虑过使用react-native-web，但最终决定放弃，主要是想学习React。）
如果没有等价物，我一直在考虑仅使用 map() 通过我构建的 Item 组件来呈现所有项目，也如文档中的 here 和此 SO question 中所示。
【问题讨论】：
标签： javascript reactjs react-native react-native-flatlist
我为此创建了一个组件
export const FlatList = ({
items,
RenderItem,
ListHeaderComponent,
ListFooterComponent,
ListEmptyComponent,
}) => {
// console.log(Render)
// console.log(items, "items");
if (Array.isArray(items)) {
const render = items.map((v, i) => {
return RenderItem({ data: v, key: i });
});
// console.log(render, "render");
if (render.length) {
return (
<React.Fragment>
{ListHeaderComponent ? ListHeaderComponent() : null}
{render}
{ListFooterComponent ? ListFooterComponent() : null}
</React.Fragment>
);
}
return (
<React.Fragment>
{ListHeaderComponent ? ListHeaderComponent() : null}
{ListEmptyComponent ? ListEmptyComponent() : null}
{ListFooterComponent ? ListFooterComponent() : null}
</React.Fragment>
);
}
if (ListHeaderComponent || ListEmptyComponent || ListEmptyComponent) {
return (
<React.Fragment>
{ListHeaderComponent ? ListHeaderComponent() : null}
{ListEmptyComponent ? ListEmptyComponent() : null}
{ListFooterComponent ? ListFooterComponent() : null}
</React.Fragment>
);
}
return null;
};
我是这样用的
<FlatList items={dataAdmin} RenderItem={RenderAdmins} />
您不必担心密钥，该组件会自动处理。您的 RenderItem 组件应如下所示
const RenderAdmins = ({ data, key }) => {
const org = data.organization;
if (org) {
return (
<StyledTableRow key={key}>
<StyledTableCell align="center">{org.name}</StyledTableCell>
<StyledTableCell align="center">{data.email}</StyledTableCell>
<StyledTableCell align="center">{org.phone}</StyledTableCell>
<StyledTableCell align="center">{data.phone}</StyledTableCell>
<StyledTableCell align="center">
{data.first_name + " " + data.last_name}
</StyledTableCell>
<StyledTableCell align="center">{org.address}</StyledTableCell>
<StyledTableCell align="center">Eti Osa</StyledTableCell>
</StyledTableRow>
);
}
return null;
};
您的项目应该是一个数组。
【讨论】：
最好使用 React 组件创建自己的列表。如果您有兴趣，我会帮助您创建一个。
【讨论】：
【讨论】：
有一个名为 flatlist-react (npm install flatlist-react) 的 react 组件，您可以使用它来呈现如下列表：
<FlatList list={[1, 2, 3]} renderItem={item => <li>{item}</li>}/>
它还为您处理排序、分组、过滤和布局样式等事情。
项目：
【讨论】：
没有像 react-native 那样的特定组件来做这种事情，所以我通常只是使用map() 来实现这种事情。
但如果它是可重用的，您当然可以为自己创建一个 List 组件，这样您就不必每次都为同一个列表编写 map() 函数。
有点像这样：
function Item(props) {
return <li>{props.value}</li>;
}
function MyList(items) {
return (
<ul>
{items.map((item) => <Item key={item.key} value={item} />)}
</ul>
);
}
【讨论】：
map 不会这样做
React-Native 通过 JavaScript 暴露原生 Andriod 和 iOS 组件来工作。
Android 和 iOS 有各自的 ListViews，在使用 FlatList 时会在内部调用它们。
HTML 没有与 iOS 和 Android 上的 ListViews 等效的列表组件。
您可以使用类似 https://github.com/Flipkart/recyclerlistview 的库来执行此操作，或者使用 Array.map 返回您想要呈现的 divs 并自己实现等效的滚动逻辑。
【讨论】：
recyclerlistview 在动态高度项上效果不佳，这是没用的，因为很多列表视图都有动态高度
这个项目包含了很多 Flat List/List View 的特性——但似乎很赞同，它适用于 React Native 和 Web，你可以阅读这篇文章：
一些有趣的点：
平面列表：
FlatList 非常棒，并带有大量功能。它甚至可以让你 渲染分隔符并带有内置的可自定义视图跟踪器 这是我们感兴趣的事情。
FlatList 是一个虚拟化列表视图，它通过卸载视图来实现 已超出视口。它确实有助于降低整体内存 使用率下降，但这种方法有缺点：
本机端的视图被破坏，导致大量垃圾收集。 现在需要在向上滚动时重新创建视图，这可能是 如果滚动很快就会出现问题。
项目：
【讨论】：