如何使用React js更新Owl Carousel

Question

我在reactjs中使用Owl Carousel。我在我的标题中使用此库作为<link ..。

我有一个Slider组件，我在其中使用Owl Carousel。 当我打电话给我的api时，我的<img ...标签会更新。我应该重新渲染我的猫头鹰旋转木马因为没有它我的图像显示为img标记。

我的索引文件：

...
    <link rel="stylesheet" href="../../assets/plugin/slider/css/owl.carousel.min.css">
    <link rel="stylesheet" href="../../assets/plugin/slider/css/owl.theme.default.min.css">
...

<div id="root"></div>

...

    <script src="../../assets/plugin/jquery-2.1.1.js"></script>
    <script src="../../assets/plugin/bootstrap/js/bootstrap.min.js"></script>
    <script src="../../assets/home/js/script.js"></script>
    <script src="../../assets/plugin/counterdown/js/countdown-timer.js"></script>
    <script src="../../assets/plugin/star_rating/js/script.js"></script>
    <script src="../../assets/plugin/slider/js/owl.carousel.min.js"></script>

我的滑块组件：

import React, { Component } from 'react'
import { Link } from 'react-router'
import Shopname from '../components/product/Shopname'
import Description from '../components/product/Description'
import Countdown from '../components/product/Countdown'
import { serverConstants } from '../constants';

class Slider extends Component {

  constructor(props) {
    super(props);

    this.state = {slider_images: []}

  }


componentWillReceiveProps(nextProps){

  this.setState({ slider_images : nextProps.slider_images });
  console.log(this.state.slider_images)
}

  render() {
    return (
      <section id="main">
          <div className="container-fluid">
              <div className="col-md-3 hidden-xs hidden-sm" id="sideMenu">
                  <ul className="list-unstyled">
                      <a href="#">
                          <li className="active">
                              <span><i className="fa fa-th"></i></span><span>همه</span>
                          </li>
                      </a>
                      <a href="#">
                          <li>
                              <span><i className="fa fa-cutlery"></i></span><span>رستوران و کافی شاپ </span>
                          </li>
                      </a>
                      <a href="#">
                          <li>
                              <span><i className="fa fa-dribbble"></i></span><span>تفریحی و ورزشی</span>

                          </li>
                      </a>
                      <a href="#">
                          <li>
                              <span><i className="fa fa-stethoscope"></i></span><span>پزشکی و سلامت</span>
                          </li>
                      </a>
                      <a href="#">
                          <li>
                              <span><i className="fa fa-film"></i></span><span>فرهنگی و هنری</span>
                          </li>
                      </a>
                      <a href="#">
                          <li>
                              <span><i className="fa fa-leaf"></i></span><span>آرایشی و زیبایی</span>
                          </li>
                      </a>
                      <a href="#">
                          <li className="last-child">
                              <span><i className="fa fa-tags"></i></span><span>کالا</span>
                          </li>
                      </a>
                  </ul>
              </div>
              <div className="col-sm-12 col-md-9" id="bestOffer">
                  <div className="col-sm-7 col-sm-push-5 left">
                      <div className="owl-one owl-carousel owl-theme">

                      {
                        this.state.slider_images.map(function(item, i){
                            return <img key={i} src={serverConstants.URL_IMAGE_COUPON+item.title} alt={item.alt} />
                        })
                      }

                      </div>
                  </div>
                  <div className="col-sm-5 col-sm-pull-7 right">
                      <div className="head">
                          <Shopname title="باغ رستوران سفره ایران"/>
                          <h4>منوی باز باغ رستوران سفره ایرانی</h4>
                          <div className="subtitle">

                          <Description title="سفره ایرانی و پرداخت تنها ۷۵۰۰ تومان به جای ۱۵۰۰۰ تومان . شادیاب لحظه ای :‌ سفره ایرانی و پرداخت تنها ۷۵۰۰ تومان به جای ۱۵۰۰۰ تومان " />

                          </div>
                      </div>
                      <div className="discount">
                          <div className="info">
                              <div>
                                  <img src="assets/home/img/icons/heartbeat.svg" /><span>خرید</span><span>۱۵</span>
                              </div>
                              <div>
                                  <i className="fa fa-map-marker"></i><span>تهران</span>
                              </div>
                          </div>
                          <div className="price">
                              <div>
                                  <strike>۱۵۰۰۰</strike>
                              </div>
                              <div>
                                  <span>۷۵۰۰</span><span>تومان</span>
                              </div>
                          </div>
                          <div className="bullet">
                              <span>٪۵۰</span>
                          </div>
                      </div>
                      <hr />
                      <Countdown />
                      <hr />
                      <div className="button">
                          <a href="#"><button><img src="assets/home/img/icons/ic_shopping_cart_24px.svg" />سبد خرید</button></a>
                          <a href="details_page.html"><button><img src="assets/home/img/icons/details.svg" />جزئیات</button></a>
                      </div>
                  </div>
              </div>
          </div>
      </section>
    )
  }
}

export default Slider