用于 React 的 Swiper js 无法正确呈现子项

如何解决用于 React 的 Swiper js 无法正确呈现子项

首先，我使用 React、Gatsby 和 Swiperjs。

我在将子项渲染为 Swiper 组件时遇到问题。 我在两个地方（博客和投资组合部分）使用了 swiper，所以我创建了 CardsSlider 组件来重用它。我使用了两种相似的组件，所以我使用高阶组件来用 SwiperSlide 包围每个卡片组件。然后我遍历每个数据以生成由 SwiperSlide 组件包围的卡片作为 CardsSlider 的子道具，这基本上是 Swiper。问题是：SwiperSlide 卡片没有使用 SwiperWrapper 组件包装，您可以在下面的 devtools ss 中看到。

HTML Tags

博客组件：

const Blog = () => {
  const { postImage } = useStaticQuery(...)
  const CardsData = [
    {
      title: 'Post1',description:
        'Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum veritatis in reiciendis sit facere enim modi,libero placeat consectetur eaque?',image: postImage,},...
  ];

  const BlogPostCardWithSlider = withSlider(BlogPostCard);

  return (
    <StyledSection>
      <StyledHeader text="BLOG" />
      <CardsSlider pagination>
        {CardsData.map((data) => (
          <BlogPostCardWithSlider key={data.title} data={data} />
        ))}
      </CardsSlider>
      <Button dark text="ZOBACZ WSZYSTKIE WPISY" />
    </StyledSection>
  );
};

export default Blog;

投资组合组件：

 const Portfolio = () => {
  const { projectImage } = useStaticQuery(...);

  const CardsData = [
    {
      title: 'Project1',image: projectImage,techStack: ['bootstrap','nodejs','sequelize','react','mssql'],...
  ];

  const ProjectCardWithSlider = withSlider(ProjectCard);

  return (
    <StyledSection odd>
      <StyledHeader text="PORTFOLIO" />
      <CardsSlider navigation loop>
        {CardsData.map((data) => (
          <ProjectCardWithSlider key={data.title} data={data} />
        ))}
      </CardsSlider>
    </StyledSection>
  );
};

export default Portfolio;

withSlider HOC：

import React from 'react';
import { SwiperSlide } from 'swiper/react';

const slideStyles = {
  display: 'flex',justifyContent: 'center',alignItems: 'center',};

const withSlider = (WprappedComponent) => (props) => (
  <SwiperSlide style={slideStyles}>
    <WprappedComponent {...props} />
  </SwiperSlide>
);

export default withSlider;

CardsSlider 组件：

import React from 'react';
import styled from 'styled-components';
import { Swiper } from 'swiper/react';
import SwiperCore,{ Pagination,Navigation } from 'swiper';
import 'swiper/swiper-bundle.css';

SwiperCore.use([Pagination,Navigation]);

const SwiperWrapper = styled(Swiper)`
  ...
`;

const CardsSlider = ({ children,pagination,...rest }) => {
  const params = {
    spaceBetween: 0,pagination: pagination && { clickable: true },...rest,};

  return <SwiperWrapper {...params}>{children}</SwiperWrapper>;
};

有趣的事实是，当我这样映射孩子时：

{children.map((child) => <SwiperSlide>{child}<SwiperSlide/>)}

它呈现在正确的位置。

感谢您的帮助。

解决方法

在处理最小示例时，我遇到了完全相同的问题。如果孩子不是 SwiperSlides，似乎在包装器之后添加了孩子。 我的建议是将 SwiperSlide 作为 Swiper 组件的直接子级，并使用 HOC 作为幻灯片的内容。至少，这似乎是唯一对我有用的东西，我很满意，因为我不想在 Swiper 的内部浪费太多时间。