ReactJS使用react-simple-image-slider显示黑色滑块无法正常工作求助

存在以下几处错误，逐一修正即可恢复正常：

• Prop拼写错误：组件的导航显示属性为小写开头的showNavs，你代码中写的Shownavs大小写不符合组件要求，属于无效属性
• style属性传值错误：style属性需要接收React行内样式对象，你直接传入Banner.css属于无效值，已导入的CSS文件会自动作用于当前组件，无需额外传入style属性
• 图片路径引用错误：直接在数组中写相对路径字符串不会被打包工具识别，如果你将图片放在public目录下，需要使用/banner1.png格式的绝对路径；如果放在src目录下，需要先通过import导入图片资源再传入url
• 宽高设置不合理：默认1920*1080的尺寸过大，容易超出父容器可视范围，可先缩小尺寸测试是否正常显示

以下是修正后的完整代码示例：

import React from "react";
import "./Banner.css";
import SimpleImageSlider from "react-simple-image-slider";

// 若图片放在src/assets目录下，用以下方式导入
// import banner1 from './assets/banner1.png'
// import banner2 from './assets/banner2.png'
// const image = [
//   { url: banner1 },
//   { url: banner2 },
// ];

// 若图片放在public目录下，使用如下路径写法
const image = [
  { url: "/banner1.png" },
  { url: "/banner2.png" },
];

const Banner = () => {
  return (
    <>
      <SimpleImageSlider
        width={800}
        height={450}
        images={image}
        slideDuration={1}
        navStyle={1}
        showBullets
        showNavs
      />
    </>
  )
}

export default Banner

修改后如果仍显示异常，可打开浏览器控制台检查Network面板，确认图片资源是否成功加载，若返回404调整对应图片路径即可。

内容的提问来源于stack exchange，提问作者Khoa Nguyễn