切换到另一个页面并返回后未显示滑块内容答案

【问题标题】：Slider content not showing after changing to another page and come back切换到另一个页面并返回后未显示滑块内容
【发布时间】：2017-09-02 19:53:05
【问题描述】：

我正在通过我使用的模板采用 React JS，http://templines.rocks//html/sokolcov/futurico/index-1.html

我有一个由 Home 和 Contact 组成的标题。在我的主页中，我实现了将内容保存在标题下方的滑块。我在 BannerComponent 中对其进行了编码。

import React from 'react';
import bannerJSON from '../../../config/banner.json'

const banners = bannerJSON.banners.map((banner, index)=>{
  return (
    <div className="home-slide" key= {index}>
        <div className="container">
            <div className="row">
                <div className="col-xs-10 col-xs-offset-1 col-sm-10 col-sm-offset-1 text-center">
                    <div className="b-home-slider-content" >
                        <h2 className="main-heading">
                          {banner.title}
                        </h2>
                        <div className="home-slider-text">
                            {banner.content}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
  )
})
class BannerComponent extends React.Component {
  render(){
    return (
      <div className="b-layer-big">
          <div className="layer-big-bg page-layer-big-bg">
              <div className="layer-content-big">

                  <div className="b-home-slider-holder wow slideInUp">
                      <div className="b-home-slider" data-slick='{"slidesToShow": 1, "slidesToScroll": 1, "fade": true, "speed": 1000, "autoplay": true}'>
                      {banners}
                  </div>
                  <div className="b-slick-arrows">
                      <div className="custom-slideshow-controls">
                          <span id="home-slider-prev" className="slick-arrows-prev arrow-transparent"><i className="fa fa-angle-left" aria-hidden="true"></i></span>
                          <span id="home-slider-next" className="slick-arrows-next arrow-transparent"><i className="fa fa-angle-right" aria-hidden="true"></i></span>
                      </div>
                  </div>
              </div>
          </div>
      </div>
  </div>
    );
  }
}

BannerComponent.defaultProps = {
};

export default BannerComponent;

实际渲染 Banner 组件的 Home.js

import React from 'react';
import Banner from './components/Banner'
import Step from './components/Step'
import Pricing from './components/Pricing'

export default class Homepage extends React.Component {


render(){
    return(
      <div className="b-page-content with-layer-bg">
        <Banner/>
    <div className="b-homepage-content">
      <div className="b-layer-main">
        <div className="page-arrow">
            <i className="fa fa-angle-down" aria-hidden="true"></i>
        </div>
        <Step/>
        <Pricing/>
      </div>
    </div>
  </div>
    )
  }
}

当我刷新页面时，滑块工作得很好。但是，当我通过单击联系人更改页面内容然后单击返回主页时，滑块中的内容消失了。在检查 F12 中，我仍然可以看到内容出现在元素选项卡中。内容在页面上是不可见的，滑块不会再滑动。我怀疑是 React JS 的东西没有重新渲染它。

如果没记错的话，Futirico 使用的滑块是某种http://kenwheeler.github.io/slick/。

【问题讨论】：

你能说明你是如何以及在哪里调用slick方法的吗？
slick 是一个 jquery 插件。它不能与 react.js 很好地混合。 react 很可能正在更改 slick 已附加事件侦听器的 dom 元素。如果事件监听器消失了，slick.js 将停止工作。
有一些替代轮播组件是为 react.js 制作的。这是一个：github.com/akiran/react-slick
好的，我会尝试使用它并回复你
问题解决了！ @HåkenLid 您可以将上面的两个 cmets 组合成答案吗？我可以接受它作为答案 =)

标签： javascript reactjs slick.js

【解决方案1】：

Slick 是一个 jQuery 插件。它不能与 React.js 很好地混合。 React 很可能正在更改 Slick 已附加事件侦听器的 DOM 元素。如果事件监听器消失了，Slick.js 将停止工作。

还有为 React.js 制作的替代轮播组件。这是一个：https://github.com/akiran/react-slick

【讨论】：