如何在reactjs和meteor中显示加载器?

我有一个页面,其中3个食谱列出更多的button。 点击更多button时,会列出更多的3个配方。 我想要做的是在列出更多3食谱之前,我想显示一个微调/加载器图标,但我只能改变button的文本。 我怎样才能显示加载器图标,只要更多的button被点击,并在这些额外的3食谱列出。 我正在使用meteorjs和reactjs。

我的代码是

export default class Home extends Component { constructor(){ super(); this.state = { limit:3 , loading:false } this.addMore = this.addMore.bind(this); } getMeteorData(){ let data = {}; data.recipes = []; data.recipes = Recipes.find({},{sort:{createdAt:-1}}).fetch(); let recipeHandle = Meteor.subscribe('recipelist',this.state.limit); if(recipeHandle.ready()){ data.recipes = Recipes.find({},{sort:{createdAt:-1},limit:this.state.limit}).fetch(); } return data; } addMore(){ this.setState({ limit:this.state.limit + 3, loading: true }, () => { this.setTimeout(()=>{ this.setState({loading:false}); },2000); }); } render() { console.log('this.data.recipes',this.data.recipes); let recipes = _.map(this.data.recipes,(recipe) => { return <RecipeList key={recipe._id} recipe={recipe} loading={this.state.loading} /> }); return ( <div className="row"> <div className="intro blink z-depth-1"> <div className="row"> <div className="col l7"> <h1 className="heading flow-text blink">Sell your Recipe</h1> </div> </div> </div> <div className="row"> <div className="col s12"> {recipes} </div> </div> <button onClick={this.addMore} type="button" className="btn coral more">More</button> </div> ); } } ReactMixin(Home.prototype, ReactMeteorData); 

您可以删除加载状态,只需从数据中计算加载状态: {this.state.limit !== this.data.recipes.length && <img src="path_to_loader.gif" />}

我不确定你要在哪里展示装载机,但是例如你可以这样做:

 render() { console.log('this.data.recipes',this.data.recipes); let recipes = _.map(this.data.recipes,(recipe) => { return <RecipeList key={recipe._id} recipe={recipe} loading={this.state.loading} /> }); return ( <div className="row"> <div className="intro blink z-depth-1"> <div className="row"> <div className="col l7"> <h1 className="heading flow-text blink">Sell your Recipe</h1> </div> </div> </div> <div className="row"> <div className="col s12"> {recipes} </div> </div> {this.state.limit !== this.data.recipes.length && <img src="path_to_loader.gif" />} <button onClick={this.addMore} type="button" className="btn coral more">More</button> </div> ); }