在 React 中根据用户偏好动态更改 react-slick 滑块点图标

Question

您好，我使用 react-slick 滑块进行了一些自定义。

我有两个 png 点图标，可以动态更改（用户可以从管理部分更改并将前端作为 API 数据返回）

../navigator.png 
and 
../navigator-active.png

    sliderSettings = {
      dots: true,
      infinite: true,
      slidesToShow: 1,
      slidesToScroll: 1,
      autoplay: true,
      appendDots: dots => {
        return <ul style={{ margin: '0px' }}>{dots}</ul>;
      },
      customPaging: (pagi, i) => {
        const style = {
            width: 13,
            height: 13,
            display: 'inline-block',
            backgroundImage: `url(../navigator.png )`, // need to change as navigator-active.png this when active
            backgroundSize: 'contain',
            backgroundRepeat: 'no-repeat',
        };
        return <a className="slick-dot" style={style} />;
      },
  };

是否可以添加一个活动图标，需要将默认点图标更改为活动点图标

Answer 1

你可以试试这个，只要用setState记录下当前silde索引，并根据它改变样式。

 render() {
    var settings = {
      dots: true,
      infinite: true,
      slidesToShow: 1,
      slidesToScroll: 1,
      autoplay: true,
      appendDots: dots => {
        return <ul style={{ margin: "0px" }}>{dots}</ul>;
      },
      beforeChange: (prev, next) => {   // here to detect slide change
        this.setState({ currentSlideIndex: next });
      },
      customPaging: (pagi, i) => {
        const style = {
          width: 13,
          height: 13,
          display: "inline-block",
          backgroundImage: `url(../navigator.png )`, // need to change as navigator-active.png this when active
          backgroundSize: 'contain',
          backgroundRepeat: "no-repeat"
        };
        const activeStyle = {
          width: 13,
          height: 13,
          display: "inline-block",
          backgroundImage: `url(../navigator-active.png )`,
          backgroundSize: 'contain',
          backgroundRepeat: "no-repeat"
        };
        return (
          <a
            className="slick-dot"
            style={pagi === this.state.currentSlideIndex ? activeStyle : style}
          />
        );
      }
    };