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