我将 GlideJS 与 React 项目一起使用,但它返回了一个奇怪的行为。组件没有在每个视图中显示一个,并且它们的宽度已更改。
组件:
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="Veja mais ofertas!"
>
<span className="hidden">Anterior</span>
</button>
<button
className="glide__arrow glide__arrow--right rounded-full"
data-glide-dir=">"
title="Veja mais ofertas!"
>
<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;
我想知道问题是否与我的代码、我需要导入的一些丢失的样式表有关,或者传递给 glide 的操作是否错误。