用 React 实现一个全局的加载条？

Question

我想要实现一个全局的加载条。

就是类似这种。

如果有东西在加载就显示这个。

用了 react-router，该怎么写显示隐藏的逻辑呢？

Answer 1

在根组件写一个props控制这个条是否显示
然后再router的回调函数中控制

Answer 2

App 根组件

import React, { Component, PropTypes } from 'react';
class App extends Component {
  constructor(props, context) {
    super(props, context);
  }
  loading() {
    // 这里那得全局的state 当中的 Loading
    if (Loading) {
      return <Loading />
    }
    return null;
  }
  render() {

    return (
      <div>
        {this.loading()}
           {this.props.children}
        }
      </div>
      );
  }
}

export default App;
  

路由配置

  <Route path="/" component={ App } >
     <IndexRoute component={ Homepage } />
       <Route />
        <Route />
        </Route>

在每个页面加载完数据更新全局state里的loading