所以我一直在使用 ReactJS 作为 Meteor 的前端,除非我遗漏了一些东西,否则我不确定如何使用reactive-var来更新我的新闻提要。下面是我现在的代码:
Dashboard = React.createClass({
mixins: [ ReactMeteorData ],
getMeteorData() {
let subscription = Meteor.subscribe( 'newsFeed' );
let page = new ReactiveVar();
page.set(0);
return {
isLoading: !subscription.ready(),
news: News.find({}, {limit: 3, skip: (page.get() * 3), sort: {createdDate: 1}}).fetch(),
page: page,
totalCount: Counts.get( 'newsCounter' )
};
},
componentDidMount() {
},
newer() {
this.data.page.set(this.data.page.get() + 1);
console.log(this.data.page.get());
},
older() {
if(this.data.page.get() > 0)
this.data.page.set(this.data.page.get() - 1);
console.log(this.data.page.get());
},
render() {
if ( this.data.isLoading ) {
return <Loading />;
} else {
return (
<div>
<NewsList news={this.data.news} />
<ul className="pager">
<li className={this.data.page.get() <= 0 ? 'previous disabled' : 'previous' } onClick={this.older}><a href="#">← Older</a></li>
<li className="next" onClick={this.newer}><a href="#">Newer →</a></li>
</ul>
</div>
);
}
}
});
目前,当我单击较新的按钮时,它似乎确实增加了页面变量,但它永远不会超过 1,而较旧的按钮似乎会将其从 1 恢复为 0,但我不能 100% 确定。我不确定 react 变量出了什么问题,我知道它的工作方式与 Blaze 不同,这是显而易见的,但我似乎找不到任何关于如何使用它们的解释或示例。
如果有人可以帮助我,无论是通过示例、更正,还是仅仅提供一个像样的文档的链接,那就太棒了。
最佳答案
您需要将页面变量移至 getInitialState 中。
Dashboard = React.createClass({
mixins: [ ReactMeteorData ],
getInitialState() {
let page = new ReactiveVar(0);
return { page };
},
getMeteorData() {
let subscription = Meteor.subscribe( 'newsFeed' );
return {
isLoading: !subscription.ready(),
news: News.find({}, {limit: 3, skip: (page.get() * 3), sort: {createdDate: 1}}).fetch(),
totalCount: Counts.get( 'newsCounter' )
};
},
componentDidMount() {
},
newer() {
this.state.page.set(this.state.page.get() + 1);
console.log(this.state.page.get());
},
older() {
if(this.state.page.get() > 0)
this.state.page.set(this.state.page.get() - 1);
},
render() {
if ( this.data.isLoading ) {
return <Loading />;
} else {
return (
<div>
<NewsList news={this.data.news} />
<ul className="pager">
<li className={this.state.page.get() <= 0 ? 'previous disabled' : 'previous' } onClick={this.older}><a href="#">← Older</a></li>
<li className="next" onClick={this.newer}><a href="#">Newer →</a></li>
</ul>
</div>
);
}
}
});
关于javascript - 在 ReactJS 前端中使用 Meteor react 变量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33480563/