Я использую оба реагирования и jquery по отдельности. Я хочу, чтобы bundle.js из реагирования извлекал все данные API перед запуском функций jquery.
У меня есть код реакции, загружающий все изображения с серверов / api и jquery всдвиньте эти изображения и управляйте высотой изображения по размеру экрана.Сначала я включил bundle.js, а затем мой файл custom.js.Несмотря на то, что bundle.js запускается первым, но fetch api запускается после custom.js, из-за чего jquery не может скользить по этим изображениям.
App.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;
}
}
Main.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>
)
}
}
custom.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 ----------*/
})
Ниже приведен скриншот, который я получаю сейчас.Я хочу наоборот.Я ожидал, что сообщение console.log custom.js будет напечатано после Main.js console.log
