可以有条件地渲染多个 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,})
            }
            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,})
            }
            list={likedPosts}
            updateList={(likedPosts) => setLikedPosts(likedPosts)}
            infiniteLoaderRef={likedPostsLoaderRef}
            empty={renderEmpty()}
          >
            <Post user={user} />
          </InfiniteList>
        );

      default:
        return null;
    }
};

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）