Owl Carousel npm 模块在 reactjs 中不工作

Question

我正在开发一个 reactjs 应用程序，我正在使用 owl carousel npm 模块来显示一些数据。

我有一个只呈现 owl 旋转木马的组件，为此我安装了 owl 旋转木马并像下面那样导入

import OwlCarousel from 'react-owl-carousel';
import 'owl.carousel/dist/assets/owl.carousel.css';
import 'owl.carousel/dist/assets/owl.theme.default.css';

下面是渲染方法

 render() {
    const options = { 
        nav: true,
        navText:["<div className='nav-btn prev-slide'></div>","<div className='nav-btn next-slide'></div>"],
        rewind: false,
        autoplay: true,
        slideBy: 1,
        dots: true,
        dotsEach: true,
        dotData: true
      };
      if(!this.state.response) return(<div>Loading...</div>);
      return (
          <div className="container">
          <div className="PageHeading">
            <div className="row">
              <div className="col-md-8 col-sm-8 col-xs-12"><h4>Latest Published</h4></div>
              <div className="col-md-4 col-sm-4 col-xs-12 text-right"><Link to="/">View All&nbsp;<i className="arrow_carrot-right"></i></Link></div></div>
              </div>
              <br />
             <OwlCarousel ref="gallery" margin={15} loop autoplay={true} items={6}  options={options}>
                {
                    this.state.response.map((obj,key)=>
                    <div className="" key={key}>
                    <div className="subcategories_blockCard"> 
                    <Link to={'/book/'+obj.book_title.split(' ').join('-')}>
                        <img src={'http://localhost:3001/'+obj.book_cover} style={{'width':'100%'}} title={obj.book_title}/>
                        {/* <div className="card-content">{obj.book_title}</div> */}
                        </Link>
                    </div>
                </div>
                    )
                }

            </OwlCarousel>
          </div>

        )
  }

现在，问题是当应用程序启动时轮播项目不可见，当我单击任何包含根路径 http://localhost:3000/ 的 link 时（假设应用程序的徽标包含 http://localhost:3000/，当点击标志 <a href="http://localhost:3000"><img src="logo.png /></a>) 时，轮播会出现在页面上。

我不知道怎么解决，请帮助我。

Answer 1

我猜你的问题是你没有使用 setState 来改变状态。

Owl Carousel npm 模块在 reactjs 中不工作

Owl Carousel npm module is not working in reactjs

javascript

reactjs

owl-carousel