javascript - 如何在从单独的文件加载自定义 javascript 之前从反应中加载所有提取

Question

我分别使用 react 和 jquery 我希望 bundle.js 在运行 jquery 函数之前从 react 获取所有 api 数据。

我有一个反应代码从服务器/api和jquery加载所有图像以滑动这些图像并管理图像的高度以适合屏幕。我首先包含了 bundle.js，然后是我的 custom.js 文件。即使 bundle.js 先运行，但是 fetch api 在 custom.js 之后运行，因为 jquery 无法滑动这些图像。

应用程序.js

export class App extends Component {

constructor(props){
    super(props)
    this.state = {
        loading : false,
        all_data : []
    }
    this.fetchFromServer();
}

fetchFromServer(){
    Promise.all([
        fetch("http://abcdef.com/api/slider.php",{
            method : "POST",
            headers: new Headers({
                'Accept' : 'application/json',
            }),
            body: JSON.stringify({
                limit : "10",
            })
        })
    ]).then(([all_post_api])=>Promise.all([all_post_api.json()])).
    then(([post_data]) => this.setState({
        loading : false,
        all_data : post_data
    }))
}

render(){
        const allowRender = this.state.all_data && this.state.all_data.carousel
        if (allowRender) {

        return (<div className="right-content">

            <Main data={this.state.all_data} />
        </div>)

        } 

        return null;
}

}

主.js

export class Main extends Component {

render(){
    console.log(this.props.data.carousel);
    return (


                <div className="flexslider home-page">
                    <ul className="slides">
                    {
                        this.props.data.carousel.map((name,index)=>{
                            return (
                            <li className="images-bg" key={index}>
                                <img src={name.url} />
                                <div className="circle">
                                            <div className="home-title left">
                                                <span>
                                                    Welcome <strong>to</strong>
                                                </span>
                                                <span>
                                                    <strong>foto</strong>hunter
                                                </span>
                                                <p>Only the best pictures of animals and travel.</p>
                                            </div>
                                            <a className="button-down glyph fa-angle-down" href=""></a>
                                        </div>
                            </li>
                            )

                        })

                    }
                    </ul>
                </div>




    )
}

}

自定义.js

$(function (){        
 console.log("loaded content");
$('.images-bg').each(function(){
            $(this).css({
                'background-image': 'url(' +$('img', this).hide().attr('src') +')',
                'height': $(window).height()
            });
        });

        /*----------  BIG SLIDER  ----------*/
        $('.portfolio-with-details .flexslider, .service .flexslider').flexslider({slideshowSpeed: 5000});
        $('.portfolio-image.flexslider').flexslider({slideshow: false});
        $('.flexslider.home-page').flexslider({
            slideshowSpeed: 5000,
            after : function(slider){
                var next = $('.flex-active-slide', slider).find('.home-title');
                var className = '';
                if(next.hasClass('left')){
                    className = 'bounceInLeft';
                }else if(next.hasClass('top')){
                    className = 'flipInX';
                }else if(next.hasClass('zoom')){
                    className = 'bounceIn';
                }
                next.addClass(className + ' animated');
                next.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
                    next.removeClass(className + ' animated');
                });
            }
        });
        /*----------  //BIG SLIDER  ----------*/

    })

下面的截图是我现在得到的。我要相反。我希望在 Main.js console.log 之后打印 custom.js console.log 消息

标签： javascriptjqueryreactjsdomfetch

Answer 1

在您的 Jquery 中尝试将其更改为

$( document ).ready(function (){        
 console.log("loaded content");
$('.images-bg').each(function(){
            $(this).css({
                'background-image': 'url(' +$('img', this).hide().attr('src') +')',
                'height': $(window).height()
            });
        });

        /*----------  BIG SLIDER  ----------*/
        $('.portfolio-with-details .flexslider, .service .flexslider').flexslider({slideshowSpeed: 5000});
        $('.portfolio-image.flexslider').flexslider({slideshow: false});
        $('.flexslider.home-page').flexslider({
            slideshowSpeed: 5000,
            after : function(slider){
                var next = $('.flex-active-slide', slider).find('.home-title');
                var className = '';
                if(next.hasClass('left')){
                    className = 'bounceInLeft';
                }else if(next.hasClass('top')){
                    className = 'flipInX';
                }else if(next.hasClass('zoom')){
                    className = 'bounceIn';
                }
                next.addClass(className + ' animated');
                next.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
                    next.removeClass(className + ' animated');
                });
            }
        });
        /*----------  //BIG SLIDER  ----------*/

    })

这样，React 会在挂载之前获取，而 Jquery 会在页面完全准备好时触发！