如何在reactjs和meteor中显示加载程序？

Question

我有一个页面，其中3个食谱与更多按钮一起列出。点击更多按钮时，会列出更多3个配方。我想要做的是在列出更多3个食谱之前，我想显示一个微调器/加载器图标，但我只能改变按钮的文本。只要点击更多按钮，并且在列出其他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); 

Answer 1

您可以删除加载状态，只是计算从数据加载状态：{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> 
); 
}