javascript - Material-UI RefreshIndicator 在初始页面加载中不显示

Question

我在初始页面加载时无法显示加载图标。该代码对我来说看起来不错，但有些它没有显示加载图标。我正在使用 Material ui RefreshIndicator 来加载图标。我正在使用 material-ui V^0.18.7。

这是我最初的 App.js 代码

import React, { Component } from 'react';
import HeaderTemplate from './Layout/Components/Header';
import FooterTemplate from './Layout/Components/Footer';
import RefreshIndicator from 'material-ui/RefreshIndicator';
import RaisedButton from 'material-ui/RaisedButton';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      showLoading: true
    }
  }
  componentDidMount(){
    this.setState({
      showLoading: false
    })
  }

  renderLoading(){
      <RefreshIndicator
        size={40}
        left={10}
        top={0}
        status="loading"
        style={{display: 'inline-block', position: 'relative'}}
      />
  }
  render() {
    const muiTheme = imports.getMuiTheme({

    });
    return (
      <MuiThemeProvider muiTheme={muiTheme}>
        <div>
        <HeaderTemplate logo="Postme" />
          <div id="demo-settings" className="">
            <a href="#" id="demo-settings-toggler" className="fa fa-dot-circle-o"></a>
          </div>
        <div className="container-fluid bodyfluid">
        {this.state.showLoading ? this.renderLoading(): ''}
          {this.props.children}
        </div>
        <FooterTemplate />
      </div>
      </MuiThemeProvider>
    );
  }
}

export default App;

Answer 1

您的方法 renderLoading() 不会返回任何内容。它只是将 JSX-Element 创建为“无”。

import React, { Component } from 'react';
import HeaderTemplate from './Layout/Components/Header';
import FooterTemplate from './Layout/Components/Footer';
import RefreshIndicator from 'material-ui/RefreshIndicator';
import RaisedButton from 'material-ui/RaisedButton';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      showLoading: true
    }
  }
  componentDidMount(){
    this.setState({
      showLoading: false
    })
  }

  renderLoading(){
    return (<div style={{position: 'relative'}}>
      <RefreshIndicator
        size={40}
        left={10}
        top={0}
        status="loading"
        style={{display: 'inline-block', position: 'relative'}}
      />
  </div>);
  }
  render() {
    const muiTheme = imports.getMuiTheme({

    });
    return (
      <MuiThemeProvider muiTheme={muiTheme}>
        <div>
        <HeaderTemplate logo="Postme" />
          <div id="demo-settings" className="">
            <a href="#" id="demo-settings-toggler" className="fa fa-dot-circle-o"></a>
          </div>
        <div className="container-fluid bodyfluid">
        {this.state.showLoading ? this.renderLoading(): ''}
          {this.props.children}
        </div>
        <FooterTemplate />
      </div>
      </MuiThemeProvider>
    );
  }
}


export default App;

现在它返回您创建的 JSX 元素，并且它应该按照您喜欢的方式呈现。