Reactjs SwiperJS导航未显示

我的问题是SwiperJS导航不可见。 文件中写道：

navigation的nextEl是一个字符串，带有CSS选择器或元素的HTML元素，单击该元素后，它将像“next”按钮一样工作 但当我这么做的时候

navigation={{
    nextEl: <div>some text</div>
}}

导航={{
nextEl：一些文本
}}

它根本没有显示

import React from 'react';
import { Swiper, SwiperSlide } from 'swiper/react';
import SwiperCore, { Navigation } from 'swiper';
import 'swiper/swiper-bundle.min.css'

import classes from './HorizontalSwiper.module.css';

SwiperCore.use([Navigation]);

const HorizontalSwiper = ({title}) => {
    return (
        <section className={classes.hs}>
             <header>
                <div className={classes.hs__title}>{title}</div>
                <div className={classes.hs__seeAll}>see all</div>
            </header>

            <Swiper 
                spaceBetween={10}
                slidesPerView={2} 
                direction='horizontal'
                navigation={{
                    nextEl: <div>next</div>,
                    prevEl: <div>prev</div>
                }}
                className={classes.swiper}>
                {
                    [1,2,3,4,5].map(function showSwiperItem(el, i){
                        return (
                            <SwiperSlide key={`${el}_${i}`} className={classes.swiper__slide}>
                                {el}
                            </SwiperSlide>
                        )
                    })
                }
            </Swiper>

        </section>
    )
}

export default HorizontalSwiper;

从“React”导入React；
从“Swiper/react”导入{Swiper，SwiperSlide}；
从“swiper”导入SwipCore，{Navigation}；
导入“swiper/swiper bundle.min.css”
从“/HorizontalSwiper.module.css”导入类；
使用（[Navigation]）；
常量水平开关=（{title}）=>{
返回(
{title}
见识
{
[1,2,3,4,5].映射（函数showSwiperItem（el，i）{
返回(
{el}
)
})
}
)
}
导出默认水平开关；

nextEl

/

prevEl

：带有CSS选择器或 元素，该元素在单击后将像“下一步/上一步”按钮一样工作。

代码中的错误：

1/2. 该值应为字符串 变量写在双引号或单引号内

正确：

nextEl: '.swiper-button-next',

nextEl: .swiper-button-next,

错误：

nextEl: '.swiper-button-next',

nextEl: .swiper-button-next,

2/2. 字符串表示

CSSSelector-或-HTMLElement

（选择器） 这不是行为。使用

class

-或-

id

-或-

html元素

正确示例：

nextEl: '.swiper-button-next',

nextEl: .swiper-button-next,

2.1：按类别选择：

 navigation={
    nextEl: `.some_class_selector`,
 }

2.2：按id：

 navigation={
    nextEl: `#next_btn`,
 }

2.3：按HTML元素（不太有用）：

您的html：

<hgroup>next</hgroup>

错误（下面的代码不会将

下一个

节点添加到DOM）：

自定义Prev
自定义下一个
幻灯片1
幻灯片2
幻灯片3
幻灯片4

嗯……不太可能。。你在这里介绍的是一种方法，如果你仔细查看我的代码，你会发现在React.js应用程序中创建它的方式与我在SwiperJS官方视频中介绍的完全不同。。顺便说一句，如果我使用console.log（Navigation），我会得到Navigation.params.Navigation.nextEl是我制作的元素，但它只是没有显示出来……React只是做同样事情的另一种方式（相同的API）。您可以使用道具而不是对象安装。您在文档中看到了将自定义下一个/上一个作为下一个（无处）实现的方法吗？。。。我编辑了答案，请尝试下面的代码块。这里怎么了？谢谢你，伙计。这是有帮助的。现在我明白了：））