如何在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> 
); 
}