如何將 jquery 轉換為 reactjs 組件？

Question

我想用“瓷磚樣式”的自定義分頁制作輪播。 我正在使用反應光滑的庫。

我在這里找到了一個使用 jquery 的工作演示：

HTML 零件

<section class="slider">
<div data-title="title1" data-thumb="http://cdn.bulbagarden.net/upload/e/ec/001MS.png"><img src="http://cdn.bulbagarden.net/upload/c/c0/Spr_3f_001.png"></div>
<div data-title="title2" data-thumb="http://cdn.bulbagarden.net/upload/b/bb/004MS.png"><img src="http://cdn.bulbagarden.net/upload/e/e9/Spr_3f_004.png"></div>
<div data-title="title3" data-thumb="http://cdn.bulbagarden.net/upload/9/92/007MS.png"><img src="http://cdn.bulbagarden.net/upload/f/f8/Spr_3f_007.png"></div>
<div data-title="title4" data-thumb="http://cdn.bulbagarden.net/upload/0/0f/025MS.png"><img src="http://cdn.bulbagarden.net/upload/5/5b/Spr_3f_025.png"></div>
<div data-title="title5" data-thumb="http://cdn.bulbagarden.net/upload/d/de/133MS.png"><img src="http://cdn.bulbagarden.net/upload/a/a9/Spr_3f_133.png"></div>
<div data-title="title6" data-thumb="http://cdn.bulbagarden.net/upload/a/a7/151MS.png"><img src="http://cdn.bulbagarden.net/upload/3/33/Spr_3f_151.png"></div>

JQUERY

$(".slider").slick({
        dots: true,
        arrows: false,
        infinite: false,
        slidesToShow: 2,
        slidesToScroll: 2,

//autoplay: true,
//dots: true
customPaging : function(slider, i) {
    var title = $(slider.$slides[i].innerHTML).find('div[data-title]').data('title');
    return '<a class="pager__item"> '+title+' </a>';
},

//responsive: [{ 
//    breakpoint: 200,
//    settings: {
///        d
//    } 
//}]

});

完整的工作演示（jquery）： https://codepen.io/neverov12/pen/OJLYpzm

我想從 jquery 轉換為完整的 reactjs，但沒有成功。

我在這里嘗試過的（reactjs）： https://codesandbox.io/s/dazzling-hugle-wtcht

Answer 1

您使用customPaging錯誤，此回調 function 只有一個參數，即幻燈片編號。 我讓它在你給定的演示中工作。 這是完整的工作代碼。

import React, { Component } from "react";
import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";

export default class App extends Component {
  render() {
    const settings = {
      dots: true,
      infinite: true,
      speed: 500,
      slidesToShow: 2,
      slidesToScroll: 1,
      appendDots: (dots) => (
        <div
          style={{
            borderRadius: "10px",
            padding: "10px"
          }}
        >
          <ul> {dots} </ul>
        </div>
      ),
      customPaging: function (i) {
        return (<a className="pager__item">{i + 1}</a>)
      },
    };

    return (
      <div>
        <section className="slider">
          <Slider {...settings}>
            <div
              data-title="title1"
              data-thumb="http://cdn.bulbagarden.net/upload/e/ec/001MS.png"
            >
              <img alt="" src="http://cdn.bulbagarden.net/upload/c/c0/Spr_3f_001.png" />
            </div>
            <div
              data-title="title2"
              data-thumb="http://cdn.bulbagarden.net/upload/b/bb/004MS.png"
            >
              <img alt="" src="http://cdn.bulbagarden.net/upload/e/e9/Spr_3f_004.png" />
            </div>
            <div
              data-title="title3"
              data-thumb="http://cdn.bulbagarden.net/upload/9/92/007MS.png"
            >
              <img alt="" src="http://cdn.bulbagarden.net/upload/f/f8/Spr_3f_007.png" />
            </div>
            <div
              data-title="title4"
              data-thumb="http://cdn.bulbagarden.net/upload/0/0f/025MS.png"
            >
              <img alt="" src="http://cdn.bulbagarden.net/upload/5/5b/Spr_3f_025.png" />
            </div>
            <div
              data-title="title5"
              data-thumb="http://cdn.bulbagarden.net/upload/d/de/133MS.png"
            >
              <img alt="" src="http://cdn.bulbagarden.net/upload/a/a9/Spr_3f_133.png" />
            </div>
            <div
              data-title="title6"
              data-thumb="http://cdn.bulbagarden.net/upload/a/a7/151MS.png"
            >
              <img alt="" src="http://cdn.bulbagarden.net/upload/3/33/Spr_3f_151.png" />
            </div>
          </Slider>
        </section>
      </div>
    );
  }
}

有關自定義分頁的更多信息，請參閱此處的文檔 - https://react-slick.neostack.com/docs/example/custom-paging