更改到另一个页面并返回后不显示滑块内容

Question

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

我有 header，其中包括家庭和联系方式。在我的主页中，我实现了将内容保存在 header 正下方的滑块。我在我的 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;

Home.js 实际呈现 Banner 组件

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 的东西而不是 re-render 它。

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

Answer 1

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

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

更改到另一个页面并返回后不显示滑块内容

Slider content not showing after changing to another page and come back

javascript

reactjs

slick.js