如何在反应引导表中添加反应加载

我是reactjs的新手并反应bootstrap表.我希望在数据显示之前在我的react组件中添加react-loading.因为数据显示这么久.但不起作用.

这是我的代码

import React, { Component } from 'react';
import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';
import PageHeader from 'react-bootstrap/lib/PageHeader';
import database from './database';
import root from 'window-or-global';
import Loading from 'react-loading';

class User extends Component {
    constructor(props) {
    super(props);
    this.state = {
      text:'',
      products: []
    };

   this.userRef = database.ref('users');
  }

  componentDidMount() {
    this.userRef.on('value', this.gotData, this.errData); 
  }


  gotData = (data) => {
    let newProducts = []
    const userdata = data.val();
    const keys = Object.keys(userdata);
    for (let i = 0; i  {
   console.log(err);
 }

  handleClick = (rowKey) => {
    alert(this.refs.table.getPageByRowKey(rowKey));
  }

    render() {
    return (
      

      
          

          Members
       
        
          Name
            Address
            Email
          
      
    );
    }
}

export default User;

最好的祝愿!希望回复.

为此,第一保持bool在state变量,将跟踪是否取出或不数据,那初始值bool将是false.

constructor(){
     super();
     this.state = {
        isDataFetched: false,
     }
}

现在有一个属性React-Bootstrap-Table,option用于设置默认值并自定义noDataText,你可以使用它,如下所示:

现在定义它tableOtions object并编辑noDataText属性,如下所示:

let tableOtiOns= {
    noDataText: this._setTableOption(),
};

如果成功获取数据return,则会显示一些文本,如果数据为空则显示,否则返回加载器:

_setTableOption(){ 
     if(this.state.isDataFetched){
           return "No expenses found";
      }else{
           return(
               
           );
      }
}

注意:我使用了Material-UI RefreshIndicator,您也可以将其替换为任何其他加载器.

参考的option对象中React Bootstrap Table:http://allenfang.github.io/react-bootstrap-table/docs.html#noDataText

更新:使用此代码,并更换RefreshIndicator由Loader要显示:

import React, { Component } from 'react';
import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';
import PageHeader from 'react-bootstrap/lib/PageHeader';
import database from './database';
import root from 'window-or-global';
import Loading from 'react-loading';

class User extends Component {
    constructor(props) {
    super(props);
    this.state = {
      text:'',
      products: [],
      isDataFetched: false,
    };
    this.userRef = database.ref('users');
  }

  componentDidMount() {
    this.userRef.on('value', this.gotData, this.errData); 
  }


  gotData = (data) => {
    let newProducts = []
    const userdata = data.val();
    const keys = Object.keys(userdata);
    for (let i = 0; i  {
    console.log(err);
  }

  handleClick = (rowKey) => {
    alert(this.refs.table.getPageByRowKey(rowKey));
  }

  _setTableOption(){ 
    if(this.state.isDataFetched){
      return "No expenses found";
    }else{
      return(
        
      );
    }
  }

  render() {

    let tableOtiOns= {
        noDataText: this._setTableOption(),
    };

    return (
      

        
        

          Members
        
        
        >
          Name
          Address
          Email
        
      
    );
  }
}

export default User;