Question

我在初始页面加载时显示加载图标时遇到困难。代码对我来说很好，但有些代码并没有显示加载图标。我使用材料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创建为＆＃34;没有＆＃34;。

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元素，它应该按照你喜欢的方式呈现。

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

1 个答案: