reactjs - React 的 Swiper js 无法正确渲染子项

Question

首先，我使用 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',
      description:
        'Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum veritatis in reiciendis sit facere enim modi, libero placeat consectetur eaque?',
      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>;
};

有趣的事实是，当我像这样映射 child 时:

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

它渲染在正确的位置。

感谢您的帮助。

Answer 1

在处理最小示例时，我遇到了同样的问题。如果子项不是 SwiperSlides，则它们似乎是在包装器之后添加的。 我的建议是将 SwiperSlide 保留为 Swiper 组件的直接子组件，并使用 HOC 来显示幻灯片的内容。至少，这似乎是唯一对我有用的东西，而且我对此很满意，因为我不想在 Swiper 的内部结构上浪费太多时间。