Jquery 和 revslider 在 react.js 中不起作用答案

【问题标题】：Jquery and revslider not working in react.jsJquery 和 revslider 在 react.js 中不起作用
【发布时间】：2018-04-10 12:21:44
【问题描述】：

我是 react.js 的新手，刚刚开始研究 react。

在将静态 HTML 转换为 react.js 期间，jquery 仅在显式刷新页面后才会执行，因此反应速度变慢，而 jquery revslider 也会发生同样的情况。已尝试在 componentDidMount 中编写 jquery，但仍需要显式刷新页面才能运行 jquery。
即使是第三方jquery，遇到同样的问题需要刷新页面。

完整代码：

index.html

</script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="./js/revslider.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.3           /jquery.flexslider-min.js"></script>
<script type="text/javascript">
  // Can also be used with $(window).load(function() 
  $(document).ready(function() {
    $('.flexslider').flexslider({
      animation: "slide"
    });
  });
  </script>
</head>

revslider.js

var revapi2,
tpj=jQuery;     
tpj(document).ready(function() {
if(tpj("#rev_slider_2_1").revolution === undefined){
    revslider_showDoubleJqueryError("#rev_slider_2_1");
}else{
     revapi2 = tpj("#rev_slider_2_1").show().revolution({
     sliderType:"standard",
     jsFileLocation:"js/",
     sliderLayout:"fullwidth",
     dottedOverlay:"none",
     delay:3000,
     navigation: {
         keyboardNavigation:"off",
         keyboard_direction: "horizontal",
         mouseScrollNavigation:"off",
         mouseScrollReverse:"default",
         onHoverStop:"off",
     touch:{
         touchenabled:"on",
         touchOnDesktop:"off",
         swipe_threshold: 75,
         swipe_min_touches: 50,
         swipe_direction: "horizontal",
         drag_block_vertical: false
     }
     },
     visibilityLevels:[1240,1024,778,480],
     gridwidth:1920,
     gridheight:1080,
     lazyType:"single",
     parallax: {
         type:"mouse",
         origo:"slidercenter",
         speed:2000,
         levels:[2,3,4,5,6,7,12,16,10,50,47,48,49,50,51,55],
         disable_onmobile:"on"
     },
     shadow:0,
     spinner:"off",
     stopLoop:"off",
     stopAfterLoops:-1,
     stopAtSlide:-1,
     shuffle:"off",
     autoHeight:"off",
     hideThumbsOnMobile:"off",
     hideSliderAtLimit:0,
     hideCaptionAtLimit:0,
     hideAllCaptionAtLilmit:0,
     debugMode:false,
     fallbacks: {
         simplifyAll:"off",
         nextSlideOnWindowFocus:"off",
         disableFocusListener:false,
         panZoomDisableOnMobile:"on",
     }
   });
  }
});

App.js

class App extends Component {
    componentDidMount(){
        sliderArrow();
        menu();
    }
    render() {
        return (
            <Aux>
                <Header />
                <Head />
                <DigitalEvolution />
                <OurServiceLine />
                <SomeConcepts />
                <Last />
                <Footer />
            </Aux>
       );
   }
}
export default App;

index.js

ReactDOM.render(
<BrowserRouter>
  <Switch>
    <Route exact path='/'  component={App} />
    <Route exact path='/index.html' component={App}/>
    <Route exact path='/Digital-Strategies.html' component={Digital} />
    <Route exact path='/Service-Lines.html' component={ServiceLines} />
    <Route exact path='/Operations-Transformation.html'component=               {Operations}/>
    <Route exact path='/Why-us.html' component={WhyUs}/>
    <Route exact path='/Mission.html' component={Mission}/>
    <Route exact path='/Our-group.html' component={OurGroup}/>
    <Route exact path='/Team.html' component={Team}/>
    <Route exact path='/Projects.html' component={Projects}/>
    <Route exact path ='/Research-Development.html' component = {Research}/>
    <Route exact path='/News.html' component={News}/>
    <Route exact path='/Locations.html' component={Locations}/>
  </Switch>
</BrowserRouter>,document.getElementById('root'));

【问题讨论】：

如果您包含了一个像 jsfiddle 这样的演示站点来演示您的问题，其他人通常会更容易提供帮助
对不起，您的问题并不比这里的其他问题更紧迫

标签： javascript jquery node.js reactjs react-router

【解决方案1】：

您可以为 react npm i -S react-rev-slider 安装旋转滑块，它的工作方式与 HTML + jquery 类似。如果你想在不刷新页面的情况下加载第三方库进行响应加载，使用这个函数

function loadScript(url, callback){

   let script = document.createElement("script")
   script.type = "text/javascript";

   if (script.readyState){  //IE
       script.onreadystatechange = function(){
           if (script.readyState == "loaded" ||
                   script.readyState == "complete"){
               script.onreadystatechange = null;
               callback();
           }
       };
   } else {  //Others
       script.onload = function(){
           callback();
       };
   }

并且从组件调用它会挂载。 PS。回调参数保存下一个脚本函数。那是

componentWillMount(){
loadScript("/js/jquery.js", ()=>{
loadScript("/js/animations.js",()=>{})
})
}

希望这会有所帮助。

【讨论】：

【解决方案2】：

有一个可能的解决方案来使用 React 实现 revslider

首先，在公共文件夹的 index.html 中导入 revslider 所需的所有脚本和 css

这只会在您加载或刷新页面时起作用一次，但在您更改路线时不起作用。所以解决这个问题的方法是在 componentWillMount 中加载脚本。

所以你的代码会是这样的......

在 revslider_component.js 文件中

    componentWillMount(){
        function loadScript(src) {
          return new Promise(function(resolve, reject){
            var script = document.createElement('script');
            script.src = src;
            script.addEventListener('load', function () {
              resolve();
            });
            script.addEventListener('error', function (e) {
              reject(e);
            });
            document.body.appendChild(script);
            document.body.removeChild(script);
          })
        };

      loadScript('path/to/revslider/script1'); // make sure to load them in order
      loadScript('path/to/revslider/script2'); // PS. in order to import path out side your src folder and inside public folder use ${process.env.PUBLIC_URL}/js/revslider.js
      loadScript('path/to/revslider/script3'); 
    }

【讨论】：