【发布时间】：2019-05-25 13:57:39
【问题描述】：
我同时使用 react 和 jquery 我希望 bundle.js 在运行 jquery 函数之前从 react 获取所有 api 数据。
我有一个反应代码从服务器 / 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 ----------*/
})
下面的截图是我现在得到的。我要相反。我希望在 Main.js console.log 之后打印 custom.js console.log 消息
【问题讨论】：
标签： javascript jquery reactjs dom fetch