问题背景

在完成团队最终考核时，使用的UI组件库Ant Design的走马灯组件没有自带左右翻动按钮，仅有图片下方颜色极淡又小又细的跳转按钮，为改善用户体验开始寻找解决方法，继而引发的一系列问题。

问题描述

最初样式：如图可见，只有下面的小按钮可以进行跳转，在图片为亮色时几乎不可见，如果图片添加了跳转链接还特别容易误触到图片导致页面直接跳转，用户体验极差。因此，我打算在图片的两侧添加左右跳转的按钮。

首先当然是翻阅官方文档，官网给出了这样一个链接 Carousel走马灯增加自定义arrow功能

也就是说，在jsx中添加arrows的属性

<Carousel arrows={true}>...<Carousel>

且在css中添加如下代码

.ant-carousel .slick-prev,
.ant-carousel .slick-next,
.ant-carousel .slick-prev:hover,
.ant-carousel .slick-next:hover {
  font-size: inherit;
  color: currentColor;
}

就可以实现左右切换的按钮了

然而… 捣鼓了一会也不知道怎么改样式，索性直接自己写两个button

然后当然又遇到了新的问题：Button和Carousel两个同级组件，怎么在Button中调用Carousel的方法next()和prev()呢？第一想到的当然是ref，百度了一下大部分解决方法也是如此。美滋滋地写完，于是就出现了如下的报错

Function components cannot have string refs. We recommend using useRef()

猛然察觉，我用的是函数式组件，不是类式组件。。。百度的方法都是让我去掉ref，但我要调用这两个方法就不能去掉ref。（倒是查到一个相同处境的）

https://blog.csdn.net/SmallWite/article/details/108638840

但他用的是typescript，我还没学，有点看不懂。

于是我去翻了一下React的官方文档 useRef使用方法不断地修修改改下，最后终于成功了！

效果图与代码

完成图： CSS参考：

https://blog.csdn.net/qq_34307801/article/details/105949768

最后完成代码如下 JSX：

import React, { useRef } from "react";
import { Carousel, Button } from "antd";
import { LeftOutlined, RightOutlined } from "@ant-design/icons";
import "./index.css";

const contentStyle = {
  height: "400px",
  lineHeight: "400px",
  textAlign: "center",
  background: "#364d79",
};

const DisplayPanel = () => {
  const carouselEL = useRef(null);
  return (
    <div>
      <Button
        className="leftButton"
        style={{ left: 55 }}
        onClick={() => {
          carouselEL.current.prev();
        }}
        icon={<LeftOutlined />}
      ></Button>
      <Button
        className="rightButton"
        style={{ right: 55 }}
        onClick={() => {
          carouselEL.current.next();
        }}
        icon={<RightOutlined />}
      ></Button>
      <Carousel
        autoplay
        style={{ margin: "30px 50px 0 50px", paddingTop: 50 }}
        ref={carouselEL}
      >
        <div>
          <h3 style={contentStyle}>
            <div className="img">
              <a href="xxx">
                <img src={require("xxx")} alt="" />
                //根据自己的需求填充图片路径与链接
              </a>
            </div>
          </h3>
        </div>
        <div>
          <h3 style={contentStyle}>2</h3>
        </div>
        <div>
          <h3 style={contentStyle}>3</h3>
        </div>
        <div>
          <h3 style={contentStyle}>4</h3>
        </div>
        <div>
          <h3 style={contentStyle}>5</h3>
        </div>
      </Carousel>
    </div>
  );
};
export default DisplayPanel;

CSS（仅供参考，根据自己样式再作出具体调整）:

.img {
  /* height: 400px; */
  text-align: center;
  background-color: #fff;
}
img {
  height: 400px;
  margin: auto;
  display: inline !important;
}
.leftButton,
.rightButton {
  border: none;
  height: 36px;
  width: 36px;
  transition: 1s;
  border-radius: 50%;
  background-color: #001529;
  color: #ff0000;
  position: absolute;
  top: 40%;
  z-index: 10;
  transform: translateY(-50%);
  opacity: 0.3;
}

.leftButton:hover,
.rightButton:hover {
  opacity: 1;
}

Ant Design的Carousel走马灯组件自定义箭头

问题背景

问题描述

效果图与代码