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

我采用了React JS和我使用的模板

我有一个标题，包括主页和联系人。在我家，我实现了一个滑动条，它将内容保存在标题的正下方。我把它编码在我的横幅组件中

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;

从“React”导入React；
从“../../config/banner.json”导入bannerJSON
const banners=bannerJSON.banners.map（（横幅，索引）=>{
返回(
{banner.title}
{banner.content}
)
})
类BannerComponent扩展了React.Component{
render（）{
返回(
{横幅}
);
}
}
BannerComponent.defaultProps={
};
导出默认横幅组件；

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>
    )
  }
}

从“React”导入React；
从“./components/Banner”导入横幅
从“./components/Step”导入步骤
从“./组件/定价”导入定价
导出默认类扩展React.Component{
render（）{
返回(
)
}
}

刷新页面时，滑块工作正常。但是，当我通过单击“联系”，然后单击“返回主页”来更改页面内容时，滑块中的内容将消失。在inspect F12中，我仍然可以看到元素选项卡中显示的内容。内容在页面上是不可见的，滑块将不再滑动。我怀疑是React JS的东西没有重新渲染它

---

Futirico使用的滑块是某种类型的，如果没有弄错的话

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

---

还有其他为React.js制作的旋转木马组件。这里有一个：

你能展示一下你是如何调用

slick

方法的吗？slick是一个jquery插件。它与react.js混合不好。react可能正在更改slick附加了事件侦听器的dom元素。如果事件监听器消失了，slick.js将停止工作。还有其他为react.js制作的旋转木马组件。这里有一个：好的，我会尝试使用它，然后再与您联系问题解决了@肯利德：你能把上面的两个评论结合起来回答吗？我可以接受答案=）