如何将 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