GlideJS - 使用带有 React 组件的幻灯片时的奇怪行为

GlideJS - Weird behavior when using slide with React Components(GlideJS - 使用带有 React 组件的幻灯片时的奇怪行为)

问题描述

我将 GlideJS 与 React 项目一起使用，但它返回了一个奇怪的行为.组件没有在每个视图中显示一个，并且它们的宽度已更改.

I'm using GlideJS with a React Project, but it's returning a strange behavior. The components are not showing one per view and the width of them is changed.

组件:

import React, { Component } from "react";
import Glide from "@glidejs/glide";

export default class SliderGlide extends Component {
  state = { id: null };

  componentDidMount = () => {
    // Generated random id
    this.setState(
      { id: `glide-${Math.ceil(Math.random() * 100)}` },
      this.initializeGlider
    );
  };

  initializeGlider = () => {
    this.slider = new Glide(`#${this.state.id}`, this.props.options);
    this.slider.mount();
  };

  componentWillReceiveProps = newProps => {
    if (this.props.options.startAt !== newProps.options.startAt) {
      this.slider.go(`=${newProps.options.startAt}`);
    }
  };

  render = () => (
    <div
      id={this.state.id}
      className="mt-10"
      style={{ overflowX: "hidden", userSelect: "none", maxWidth: "100vw" }}
    >
      <div className="glide__arrows" data-glide-el="controls">
        <button
          className="glide__arrow glide__arrow--left rounded-full"
          data-glide-dir="<"
          title="VmVqYSBtYWlzIG9mZXJ0YXMh"
        >
          <span className="hidden">Anterior</span>
        </button>
        <button
          className="glide__arrow glide__arrow--right rounded-full"
          data-glide-dir=">"
          title="VmVqYSBtYWlzIG9mZXJ0YXMh"
        >
          <span className="hidden">Próximo</span>
        </button>
      </div>
      <div className="glide__track" data-glide-el="track">
        <div className="glide__slides" style={{ display: "flex" }}>
          {this.props.children.map((slide, index) => {
            return React.cloneElement(slide, {
              key: index,
              className: `${slide.props.className} glide__slide`
            });
          })}
        </div>
      </div>
      <div className="glide__bullets" data-glide-el="controls[nav]">
        {this.props.children.map((slide, index) => {
          return <button key={index} className="glide__bullet rounded-full" data-glide-dir={"=" + index} />;
        })}
      </div>
    </div>
  );
}

SliderGlide.defaultProps = {
  options: {}
};

所以在 Carousel 组件内部，我传递了子组件和 glide 选项，它们是组件.

const Plans = ({ plans, handleOffer }) => { const carouselOptions = { type: 'slide', perView: 1, startAt: 0, } return ( <div className="section__slider relative mt-10 flex justify-center items-center"> <Carousel options={carouselOptions}> { plans.map((plan, i) => { return ( <OfferProduct key={i} i={i} plan={plan} handleOffer={handleOffer}/> ) }) } </Carousel> </div> ) } export default Plans;

I want to know if the problem is related to my code, some missed styledsheet that i need to import or if the actions passed to glide are wrong. 

我想知道问题是否与我的代码、我需要导入的一些丢失的样式表有关，或者传递给 glide 的操作是否错误.

推荐答案

我刚刚使用 glidejs 和 React 为您设置了完整的工作演示.检查一下，让我知道它是否适合你.

index.js

class Plans extends Component {
  state = {
    myPlans: [
      { id: 0, text: "plan 0", price: 0 },
      { id: 1, text: "plan 1", price: 1 },
      { id: 2, text: "plan 2", price: 2 },
      { id: 3, text: "plan 3", price: 3 }
    ]
  };
  handleOffer = id => {
    console.log("handleOffer clicked, id: ", id);
  };

  render() {
    const carouselOptions = { type: "slide", perView: 1, startAt: 0 };

    return (
      <div className="home-section test">
        <SliderGlide options={carouselOptions}>
          {this.state.myPlans.map(plan => (
            <OfferProduct
              key={plan.id}
              plan={plan}
              handleOffer={this.handleOffer}
            />
          ))}
        </SliderGlide>
      </div>
    );
  }
}
export default Plans;

OfferProduct.js

const OfferProduct = ({ plan, handleOffer }) => {
  return (
    <>
      <div onClick={() => handleOffer(plan.id)} className="card">
        <p>
          <h3> Card no: {plan.id} </h3>
          <span>price: {plan.price}</span>
        </p>
      </div>
    </>
  );
};

export default OfferProduct;

SliderGlide.js

export default class SliderGlide extends Component {
  state = { id: null };

  componentDidMount = () => {
    // Generated random id
    this.setState(
      { id: `glide-${Math.ceil(Math.random() * 100)}` },
      this.initializeGlider
    );
  };

  initializeGlider = () => {
    this.slider = new Glide(`#${this.state.id}`, this.props.options);
    this.slider.mount();
  };

  componentWillReceiveProps = newProps => {
    if (this.props.options.startAt !== newProps.options.startAt) {
      this.slider.go(`=${newProps.options.startAt}`);
    }
  };

  render = () => (
    // controls
    <div id={this.state.id} className="slider">
      <div className="two-controls-btns" data-glide-el="controls">
        <button className="arrow-left" data-glide-dir="<" title="c3RhcnQ=">
          <span className="hidden">Start</span>
        </button>
        <button className="arrow-right" data-glide-dir=">" title="ZW5k">
          <span className="hidden">End</span>
        </button>
      </div>
      {/* track  *