reactjs - 可以有条件地渲染多个 InfiniteLoader 组件吗?
问题描述
该应用程序具有选项卡来选择要查看的帖子列表。有条件地渲染多个 InfiniteLoader 组件是否可行?还是性能成本太大?我应该只有一个 InfiniteLoader 组件并在适当的列表中提供吗?InfiniteList 只是一个智能包装 InfiniteLoader。
const renderContent = () => {
switch (tab) {
case "posts":
return (
<InfiniteList
getDataFromServer={(startIndex, stopIndex) =>
fetchPostsByUsername({
username: query.username,
userId: user.id,
startIndex,
stopIndex,
})
}
list={posts}
updateList={(posts) => setPosts(posts)}
infiniteLoaderRef={postsLoaderRef}
empty={renderEmpty()}
>
<Post user={user} />
</InfiniteList>
);
case "media":
return (
<InfiniteList
getDataFromServer={(startIndex, stopIndex) =>
fetchMediaPostsByUsername({
username: query.username,
userId: user.id,
startIndex,
stopIndex,
})
}
list={mediaPosts}
updateList={(mediaPosts) => setMediaPosts(mediaPosts)}
infiniteLoaderRef={mediaPostsLoaderRef}
empty={renderEmpty()}
>
<Post user={user} />
</InfiniteList>
);
case "likes":
return (
<InfiniteList
getDataFromServer={(startIndex, stopIndex) =>
fetchLikedPostsByUsername({
username: query.username,
userId: user.id,
startIndex,
stopIndex,
})
}
list={likedPosts}
updateList={(likedPosts) => setLikedPosts(likedPosts)}
infiniteLoaderRef={likedPostsLoaderRef}
empty={renderEmpty()}
>
<Post user={user} />
</InfiniteList>
);
default:
return null;
}
};
解决方案
推荐阅读
- docker - goproxy 后面的 gPRC 返回证书错误,没有代理也能正常工作
- angular - 如何管理 Ionic 4 / angular 上的后端连接错误
- python - 将多个功能组合成一个,每个功能都有特定的关键字
- pagespeed - Google 和 GTmetrix 之间的巨大 PageSpeed 差异。如何?
- html - 我的导航栏下拉菜单无法正常工作
- python - 将文本加入 Python 中的多个多级列表
- c# - 文件对话框获取完整路径
- sql - 如何在 oracle db 11g - centos 6 中启用查询日志
- angular - 无法将值从 app 组件传递到 angular5 中 index.html 中的 id 属性
- rust - 如何在 CI 上出现警告时导致编译失败并在 .cargo/config 中设置额外的 rustflags?