Question

我是react.js的新手，刚刚开始做出反应。

在将静态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'));

Answer 1

您可以安装Revolution滑块来进行反应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。 callback参数保存下一个脚本函数。那是

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

希望这会有所帮助。

Answer 2

有一种可能的解决方案可以在React中实现revslider

首先，将公用文件夹index.html中的revslider所需的所有脚本和CSS导入

此功能仅在您加载或刷新页面时起作用，但在您更改路线时无法使用。因此解决方案是将脚本加载到componentWillMount中。

所以您的代码将像这样...

在revslider_component.js文件中

git read-tree --prefix=remote -u remote/master

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

2 个答案: