javascript - 你将如何实现一个微调器组件来表明在 React 中有一个 http 请求的事实？

Question

我有一个看起来像这样的微调器组件：

import React, { PropTypes } from 'react';

class Spinner extends React.Component {

   constructor(props) {
      super(props);
      this.state = {
         loading: false
      }
   }

   render() {
      return (
         <div className="spinner"
            style={{ display: this.state.loading ? "block" : "none" }}>
            <span>Spinning to signal http loading...</span>
         </div>
      );
   }
}

export default Spinner;

现在，我想知道通知该组件 http 调用已打开/关闭的可扩展方式是什么。这样的通知过程应该更改state.loading为true|false并因此显示/隐藏微调器。

我希望你明白我的意思。这不是一个明显的问题/解决方案。触发存储的操作是应用程序（嵌套组件）每个级别的问题，并且将状态提升到主控制器组件以跟踪 http 的开启/关闭并不是特别易于管理。事实上，这需要（从顶部组件）传递给每个能够分派动作的组件，一个作为 prop 的函数，它执行以下操作：

function() {
   // `this` refers to the main/top component
   this.setState({
     loading: true
   })
}

我还在考虑从商店（基本上是EventEmitter实例）发出事件并从其本身监听Spinner然后从那里更改state.loading属性。

但老实说，我对这两种解决方案都不满意。在你看来，这是一种非常 React 的方式吗？

谢谢

标签： javascriptreactjs