React 中的 OwlCarouse - 奇怪的行为

问题描述

请看this site。特别是在底部的“Opinie i recenzje”部分。 在这里你可以看到猫头鹰旋转木马：

由于某些文本太长，我创建了一个名为 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>;
  }
}

这是猫头鹰旋转木马部分：

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,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,and see project status at a glancePlan ahead by day,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,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,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 官方仓库几个月以来似乎没有响应...... 我还搜索了现有问题或过去的问题，但找不到任何相关内容。 然而，我找到了 this issue，但尝试应用修复程序，重新编译，但问题没有修复。所以它可能是别的东西。

解决方法

我注意到不可点击的幻灯片有一个 cloned 类。 因此我搜索...并发现了这个问题：https://github.com/OwlCarousel2/OwlCarousel2/issues/2091

我设置：

loop:false,rewind:true,items:3,startPosition:1,

现在工作正常