React 中的 OwlCarouse - 奇怪的行为
OwlCarouse in React - strange behavior
请看this site。特别是在底部的“Opinie i recenzje”部分。
在这里你可以看到 owl 轮播:
由于某些文本太长,我创建了一个名为 ExpandText
的组件,它会在点击时显示更多文本,并在下次点击时隐藏文本。
有些盒子工作正常。对于其他盒子,它不会展开。但是,如果您在框位于不同位置时单击非扩展文本,它最终会正常工作:/
要展开,您必须单击 Zwiń
。
这里是扩展组件:
export class ExpandText extends React.Component {
constructor(props) {
super(props);
this.state = {
showFull: false
};
}
render() {
let visibleText = null;
let expander = null;
if (this.state.showFull || this.props.text.length <= this.props.maxLength) {
visibleText = this.props.text;
} else {
visibleText = this.props.text.substring(0, this.props.maxLength);
}
const self = this;
const clickHandler = () => {
self.setState({showFull: !self.state.showFull});
}
if(this.props.text.length > this.props.maxLength){
expander = this.state.showFull
? <span onClick={clickHandler}><b>Zwiń</b></span>
: <span onClick={clickHandler}><b>Rozwiń</b></span>;
}
return <React.Fragment>
{visibleText} {expander}
</React.Fragment>;
}
}
这里是 Owl 轮播部分:
import React, { useState, useEffect } from "react";
import dynamic from "next/dynamic";
const OwlCarousel = dynamic(import("react-owl-carousel3"));
import { finalPath } from "../../pages/index";
import Link from "next/link";
import {ExpandText} from "./ExpandText";
const options = {
loop: true,
nav: true,
autoplay: true,
autoplayHoverPause: true,
mouseDrag: true,
center: true,
dots: false,
navText: [
"<i class='icofont-bubble-left'></i>",
"<i class='icofont-bubble-right'></i>",
],
responsive: {
0: {
items: 1,
},
768: {
items: 2,
},
1200: {
items: 3,
},
},
};
const Feedback = () => {
const [display, setDisplay] = useState(false);
useEffect(() => {
setDisplay(true);
});
return (
<section className="feedback-area ptb-100 bg-gray" id="references">
<div className="container">
<div className="section-title">
<h2>Opinie i recenzje</h2>
<div className="bar"></div>
<p>
Zobacz, co o książęce „Sekrety Rozwoju Osobistego” mówią ci, którzy
już ją przeczytali.
</p>
<p>
Już przeczytana?{" "}
<Link href="/opinie">
<a>Zostaw opinię.</a>
</Link>
</p>
</div>
<div className="row">
{display ? (
<OwlCarousel
className="feedback-slides owl-carousel owl-theme"
{...options}
>
<div className="col-lg-12">
<div className="single-feedback-box">
<div className="client-info">
<img src={finalPath + "/images/client1.jpg"} alt="client" />
<h3>Alit John</h3>
<span>Web Developer</span>
</div>
<p>
<ExpandText maxLength={100} text={"Plan ahead by day, week, or month, and see project status at a glance. Search and filter to focus in on anything form a single project individual. Plan ahead by day, week, or month, and see project status at a glance."} />
</p>
</div>
</div>
<div className="col-lg-12">
<div className="single-feedback-box">
<div className="client-info">
<img src={finalPath + "/images/client2.jpg"} alt="client" />
<h3>Alit John</h3>
<span>SEO Expert</span>
</div>
<p>
<ExpandText maxLength={100} text={"Plan ahead by day, week, or month, and see project status at a glance. Search and filter to focus in on anything form a single project individual. Plan ahead by day, week, or month, and see project status at a glancePlan ahead by day, week, or month, and see project status at a glance. Search and filter to focus in on anything form a single project individual. Plan ahead by day, week, or month, and see project status at a glancePlan ahead by day, week, or month, and see project status at a glance. Search and filter to focus in on anything form a single project individual. Plan ahead by day, week, or month, and see project status at a glancePlan ahead by day, week, or month, and see project status at a glance. Search and filter to focus in on anything form a single project individual. Plan ahead by day, week, or month, and see project status at a glance."} />
</p>
</div>
</div>
<div className="col-lg-12">
<div className="single-feedback-box">
<div className="client-info">
<img src={finalPath + "/images/client3.jpg"} alt="client" />
<h3>Steven John</h3>
<span>Web Developer</span>
</div>
<p>
<ExpandText maxLength={100} text={"Plan ahead by day, week, or month, and see project status at a glance. Search and filter to focus in on anything form a single project individual. Plan ahead by day, week, or month, and see project status at a glance."} />
</p>
</div>
</div>
<div className="col-lg-12">
<div className="single-feedback-box">
<div className="client-info">
<img src={finalPath + "/images/client4.jpg"} alt="client" />
<h3>David Warner</h3>
<span>Web Developer</span>
</div>
<p>
<ExpandText maxLength={100} text={"Plan ahead by day, week, or month, and see project status at a glance. Search and filter to focus in on anything form a single project individual. Plan ahead by day, week, or month, and see project status at a glance."} />
</p>
</div>
</div>
</OwlCarousel>
) : (
""
)}
</div>
</div>
<svg
className="svg-feedback-bottom"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 100 100"
preserveAspectRatio="none"
>
<path d="M0,70 C30,130 70,50 100,70 L100,100 0,100 Z" fill="#ffffff" />
</svg>
</section>
);
};
export default Feedback;
在 package.json 我有这个版本:
"react-owl-carousel3": "^2.2.5",
有人知道为什么会出现这样的问题吗?
GitHub officla repo 几个月以来似乎没有反应......
我还搜索了现有问题或过去的问题,但找不到任何相关内容。
然而,我发现 this issue,但尝试应用修复程序,重新编译,但问题没有解决。所以这可能是别的原因。
我注意到无法点击的幻灯片有 class cloned
。
因此我搜索...并发现了这个问题:https://github.com/OwlCarousel2/OwlCarousel2/issues/2091
我设置:
loop:false,
rewind:true,
items:3,
startPosition:1,
现在可以正常使用了
请看this site。特别是在底部的“Opinie i recenzje”部分。 在这里你可以看到 owl 轮播:
由于某些文本太长,我创建了一个名为 ExpandText
的组件,它会在点击时显示更多文本,并在下次点击时隐藏文本。
有些盒子工作正常。对于其他盒子,它不会展开。但是,如果您在框位于不同位置时单击非扩展文本,它最终会正常工作:/
要展开,您必须单击 Zwiń
。
这里是扩展组件:
export class ExpandText extends React.Component {
constructor(props) {
super(props);
this.state = {
showFull: false
};
}
render() {
let visibleText = null;
let expander = null;
if (this.state.showFull || this.props.text.length <= this.props.maxLength) {
visibleText = this.props.text;
} else {
visibleText = this.props.text.substring(0, this.props.maxLength);
}
const self = this;
const clickHandler = () => {
self.setState({showFull: !self.state.showFull});
}
if(this.props.text.length > this.props.maxLength){
expander = this.state.showFull
? <span onClick={clickHandler}><b>Zwiń</b></span>
: <span onClick={clickHandler}><b>Rozwiń</b></span>;
}
return <React.Fragment>
{visibleText} {expander}
</React.Fragment>;
}
}
这里是 Owl 轮播部分:
import React, { useState, useEffect } from "react";
import dynamic from "next/dynamic";
const OwlCarousel = dynamic(import("react-owl-carousel3"));
import { finalPath } from "../../pages/index";
import Link from "next/link";
import {ExpandText} from "./ExpandText";
const options = {
loop: true,
nav: true,
autoplay: true,
autoplayHoverPause: true,
mouseDrag: true,
center: true,
dots: false,
navText: [
"<i class='icofont-bubble-left'></i>",
"<i class='icofont-bubble-right'></i>",
],
responsive: {
0: {
items: 1,
},
768: {
items: 2,
},
1200: {
items: 3,
},
},
};
const Feedback = () => {
const [display, setDisplay] = useState(false);
useEffect(() => {
setDisplay(true);
});
return (
<section className="feedback-area ptb-100 bg-gray" id="references">
<div className="container">
<div className="section-title">
<h2>Opinie i recenzje</h2>
<div className="bar"></div>
<p>
Zobacz, co o książęce „Sekrety Rozwoju Osobistego” mówią ci, którzy
już ją przeczytali.
</p>
<p>
Już przeczytana?{" "}
<Link href="/opinie">
<a>Zostaw opinię.</a>
</Link>
</p>
</div>
<div className="row">
{display ? (
<OwlCarousel
className="feedback-slides owl-carousel owl-theme"
{...options}
>
<div className="col-lg-12">
<div className="single-feedback-box">
<div className="client-info">
<img src={finalPath + "/images/client1.jpg"} alt="client" />
<h3>Alit John</h3>
<span>Web Developer</span>
</div>
<p>
<ExpandText maxLength={100} text={"Plan ahead by day, week, or month, and see project status at a glance. Search and filter to focus in on anything form a single project individual. Plan ahead by day, week, or month, and see project status at a glance."} />
</p>
</div>
</div>
<div className="col-lg-12">
<div className="single-feedback-box">
<div className="client-info">
<img src={finalPath + "/images/client2.jpg"} alt="client" />
<h3>Alit John</h3>
<span>SEO Expert</span>
</div>
<p>
<ExpandText maxLength={100} text={"Plan ahead by day, week, or month, and see project status at a glance. Search and filter to focus in on anything form a single project individual. Plan ahead by day, week, or month, and see project status at a glancePlan ahead by day, week, or month, and see project status at a glance. Search and filter to focus in on anything form a single project individual. Plan ahead by day, week, or month, and see project status at a glancePlan ahead by day, week, or month, and see project status at a glance. Search and filter to focus in on anything form a single project individual. Plan ahead by day, week, or month, and see project status at a glancePlan ahead by day, week, or month, and see project status at a glance. Search and filter to focus in on anything form a single project individual. Plan ahead by day, week, or month, and see project status at a glance."} />
</p>
</div>
</div>
<div className="col-lg-12">
<div className="single-feedback-box">
<div className="client-info">
<img src={finalPath + "/images/client3.jpg"} alt="client" />
<h3>Steven John</h3>
<span>Web Developer</span>
</div>
<p>
<ExpandText maxLength={100} text={"Plan ahead by day, week, or month, and see project status at a glance. Search and filter to focus in on anything form a single project individual. Plan ahead by day, week, or month, and see project status at a glance."} />
</p>
</div>
</div>
<div className="col-lg-12">
<div className="single-feedback-box">
<div className="client-info">
<img src={finalPath + "/images/client4.jpg"} alt="client" />
<h3>David Warner</h3>
<span>Web Developer</span>
</div>
<p>
<ExpandText maxLength={100} text={"Plan ahead by day, week, or month, and see project status at a glance. Search and filter to focus in on anything form a single project individual. Plan ahead by day, week, or month, and see project status at a glance."} />
</p>
</div>
</div>
</OwlCarousel>
) : (
""
)}
</div>
</div>
<svg
className="svg-feedback-bottom"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 100 100"
preserveAspectRatio="none"
>
<path d="M0,70 C30,130 70,50 100,70 L100,100 0,100 Z" fill="#ffffff" />
</svg>
</section>
);
};
export default Feedback;
在 package.json 我有这个版本:
"react-owl-carousel3": "^2.2.5",
有人知道为什么会出现这样的问题吗? GitHub officla repo 几个月以来似乎没有反应...... 我还搜索了现有问题或过去的问题,但找不到任何相关内容。 然而,我发现 this issue,但尝试应用修复程序,重新编译,但问题没有解决。所以这可能是别的原因。
我注意到无法点击的幻灯片有 class cloned
。
因此我搜索...并发现了这个问题:https://github.com/OwlCarousel2/OwlCarousel2/issues/2091
我设置:
loop:false,
rewind:true,
items:3,
startPosition:1,
现在可以正常使用了