React：使用 react-window 和 react-window-infinite-loader 渲染 Css 卡-解网

问：

我正在处理一个 React 项目，其中我使用库 react-window 和 react-window-infinite-loader 来渲染大量项目卡。每个项目卡都包含一个图像，该图像存储为字符串列表。我想在元素中显示这些图像

每个项目卡中的项目。

我定义了一个名为 Item 的组件来渲染每个项目卡。在 Item 中，我尝试使用和

结构。但是，我在项目卡片中图像的布局和位置方面遇到了一些问题。此外，当列表很长时，某些列表项位于项目卡下。

我面临的问题是：

图像未在项目卡中正确渲染。某些项目名称与图像重叠，并且按钮位置不正确。当项目列表很长时，某些列表项位于项目卡下，导致它们被部分隐藏。我已经尝试调整 CSS 样式并使用 flexbox 进行布局，但问题仍然存在。我怀疑 react-window 和 flexbox 样式之间可能存在一些冲突。

有没有人在使用 react-window 和 react-window-infinite-loader 将带有图像的列表渲染为字符串列表时遇到过类似的问题？如何正确地将图像渲染为每个项目卡中的列表，并确保按钮的正确位置？此外，当列表很长时，如何防止列表项进入项目卡下？

我将非常感谢解决这些问题的任何指导或建议。

下面是 Code-Sandbox 的示例示例

下面是 React 组件代码：

{filteredProjects.length === 0 && isSearchMode ? (
        <div className="d-flex justify-content-center align-items-center">
          <h3>No projects found or project is still loading</h3>
        </div>
      ) : (
        <InfiniteLoader
          isItemLoaded={isItemLoaded}
          itemCount={itemCount}
          loadMoreItems={fetchNextProjects}
        >
          {({ onItemsRendered, ref }) => (
            <FixedSizeList
              height={600}
              itemCount={itemCount}
              itemSize={150}
              onItemsRendered={onItemsRendered}
              ref={ref}
              width={1400}
            >
              {Item}
            </FixedSizeList>
          )}
        </InfiniteLoader>
      )}

/// This is the Item:
  const Item = memo(
    ({ index, style }: { index: number; style: React.CSSProperties }) => {
      if (!isItemLoaded(index)) {
        return (
          <div style={style} className="loader">
            <Spinner animation="border" variant="primary" />
          </div>
        );
      }

      const project = projects[index];
      return (
        <div style={style} className="list-group-item">
          <div className="details">
            <div className="info">
              <p className="number">{project.projectName + 1}</p>
              <p className="project-name">
                {highlightSearchTerm(project.projectName, searchTerm)}
              </p>{" "}
              {/* Added class for project name */}
              <p>Use image:</p>
              <ul>
                {project.images.map((image: any, i: any) => (
                  <li key={i}>
                    <p className="image">
                      {highlightSearchTerm(image.image, searchTerm)}
                    </p>{" "}
                    {/* Added class for image */}
                  </li>
                ))}
              </ul>
              <div className="buttons">
                {" "}
                {/* Added wrapper div for buttons */}
                {visibleImages < project.images.length && (
                  <Button
                    variant="secondary"
                    onClick={handleLoadMore}
                    className="load-button"
                  >
                    Load More
                  </Button>
                )}
                <Button
                  variant="primary"
                  onClick={() => handleGitLabButtonClick(project.gitlabUrl)}
                  className="repo-button"
                >
                  Repo
                </Button>
              </div>
            </div>
          </div>
        </div>
      );
    },
    areEqual
  );

这是css

.title {
  display: flex;
  margin-bottom: 20px;
}

.title h1 {
  color: white;
  font-weight: normal;
  font-size: 24px;
  font-family: avenir next, avenir, sans-serif;
}

.list-container {
  border: 2px solid #bababa;
  border-radius: 10px;
}

.details {
  display: flex;
  justify-content: space-between;
  font-family: 'Nunito Sans', sans-serif;
  margin-top: 15px;
}

.info {
  display: flex;
  flex-direction: column;
}

.info p {
  margin: 0;
}

.list-group-item {
  border-bottom: 1px solid #fff;
  display: flex;
  margin-bottom: 10px;
  background-color: #b9e6b3;
  padding: 10px;
}

.list-group-item .number {
  color: #fff;
  font-size: 20px;
  font-weight: 700;
}

.list-group-item .avatar img {
  width: 60px;
  height: 60px;
  border-radius: 30px;
  border: 1px solid #f0f0f0;
}

.loader {
  margin-top: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.project-name {
  margin-top: 10px;
  font-weight: bold;
}

.image {
  margin: 0;
}

.buttons {
  display: flex;
  justify-content: space-between; /* Adjust button alignment */
  align-items: center; /* Adjust button alignment */
  margin-top: 10px;
}

.load-button {
  margin-right: 0.5rem;
}

css reactjs 反应窗口

这是您编辑的沙盒： codesandbox.io/s/elastic-ben-kxqywc 因此，正如在您的实际代码中所证明的那样，我之前提到的解决方案是行不通的。我不得不更改 <FixedSizeList /> 的高度和 itemSize 道具。让我知道这是否是您需要的，之后我将编辑我的答案。

1赞 Suryasish Paul 7/9/2023

我相信这应该有效：codesandbox.io/s/elastic-ben-kxqywc?file=/src/styles.css 稍微玩弄一下样式以使其完美。另外，如果这是您需要的，请告诉我，在这种情况下，我将更新我的答案。

上一个：如何使react-window VariableSizeList对列表中的元素计数做出反应并更改列表高度？

下一个：react-window spacing between items 列表

React：使用 react-window 和 react-window-infinite-loader 渲染 Css 卡

React: Rendering Css cards with react-window and react-window-infinite-loader

评论

评论