reactjsと流星のローダーを表示するには？

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> 
); 
}