Question

我正在使用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/。

Answer 1

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

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

更改为其他页面并返回后，滑块内容未显示

1 个答案: