我确实有以下 React 组件,它订阅 MongoDB,从中加载图像并返回页面。
export default class Portfolio extends TrackerReact(React.Component) {
constructor(props) {
super(props);
this.state = {
subscription: {
albumbs: Meteor.subscribe('albums')
}
}
}
componentWillUnmount() {
this.state.subscription.albums.stop();
}
albums() {
return Albums.find().fetch();
}
render() {
function init () {
$('.carousel').flickity({
// options
"lazyLoad": true
});
};
return (
<ReactCSSTransitionGroup component='div' className='carousel' transitionName='postLoad' transitionLeaveTimeout={2000} transitionEnterTimeout={2000}>
{this.albums().map( (album) => {
return <div className='carousel-cell' key={album._id}><AlbumCover albums={album} /></div>
})}
{init()}
</ReactCSSTransitionGroup>
);
}
}
当前的 init 函数可以成功初始化轮播类,但看起来数据加载速度比轮播初始化更快,并且认为图像嵌套在轮播 slider 之外。
最佳答案
您的订阅尚未准备好,并且您的轮播功能在订阅所有数据之前触发,这就是您遇到错误的原因。
您必须确保您完全订阅了您的收藏。尝试创建一个响应式(Reactive)容器,设置一些 session 变量并正确订阅(通过 import {createContainer} from 'meteor/react-meteor-data'
导入容器):
export default createContainer(() => {
const subscription = Meteor.subscribe('albums');
subscription.ready() ? Session.set("subReady", true) : Session.set("subReady", false);
return{
album: Albums.find().fetch(),
}
}, Portfolio);
然后在你的 render() 组件中:
render(){
if(Session.get("subReady")){
return (
<ReactCSSTransitionGroup component='div' className='carousel' transitionName='postLoad' transitionLeaveTimeout={2000} transitionEnterTimeout={2000}>
{this.albums().map( (album) => {
return <div className='carousel-cell' key={album._id}><AlbumCover albums={album} /></div>
})}
{init()}
</ReactCSSTransitionGroup>
);
}
}
不要忘记,在您的 componentDidMount()
方法中添加轮播代码:
componentDidMount(){
if(Session.get("subReady")){
function init () {
$('.carousel').flickity({
// options
"lazyLoad": true
});
};
}
}
我没有在我的计算机上测试此代码,但希望它对您有用。
如果您想使用您的订阅方法,请确保:
1) 订阅已准备就绪。
2) 确保您的轮播代码位于 componentDidMount()
方法中,并以响应式方式包装,以便在数据实际准备好/订阅时触发。
关于javascript - 数据完全渲染时的 React/Meteor 初始化函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38831538/