Javascript 如何使反应组分具有2或3种以上的状态，等等？

我仍在绞尽脑汁。我正在制作一个文件上传组件。我希望组件在上传时显示三种不同的状态。我希望它最初显示选择文件输入字段，然后当用户提交表单时，我希望它显示某种类型的上传。。。消息，最后当上传完成时，我希望它说一些类似完成

现在，我让它显示输入字段，然后在提交表单时显示上传消息。我只是查看组件状态，并根据状态返回渲染中的一项或另一项

我是否应该按照相同的模式进行渲染，直到达到所需的渲染状态？这可能会导致一个巨大的if-else阻塞，这样可以吗

这是我的上下文组件

/**
 * Module dependencies
 */

import React from 'react';
import connectToStores from 'flummox/connect';


/**
 * Repositories
 */

import * as Replays from '../repository/ReplayRepository';


/**
 * Components
 */

import ReplayUploadForm from '../components/ReplayUploadForm';


/**
 * Component definition
 */

class ReplayUploadFormContainer extends React.Component {

  constructor() {

    super();

    // pre-binding
    this._handleUploadAttempt = this._handleUploadAttempt.bind(this);

    // initial state
    this.state = {
      signed: null
    };

  }

  render () {
    if (this.state.signed) {
      return (
        <h2>Uploading ...</h2>
      );
    } else {
      return (
        <ReplayUploadForm onUploadAttempt={this._handleUploadAttempt} />
      );
    }
  }

  _handleUploadAttempt (file) {

    // request signed upload request
    Replays.sign(file).then(response => {

      // update component state
      this.setState({
        signed: response
      });

      // start file upload
      Replays.upload(file, response).then(response => {

        console.log(response);

      });

    });

  }

}


/**
 * Module exports
 */

export default ReplayUploadFormContainer;

---

是的，但你可以做更多关于如果。。。其他的东西

您可以编写如下所示的对象

var uploadStatusComponent = {
    'uploading': <div>uploading</div>,
    'finished': <div>finished</div>,
    'ready': <div><input /></div>
};

---

然后，您可以去掉if-else或开关盒

是的，可以。您正在构建一个小型状态机，因此您可以切换并使用case语句，但想法是相同的。请注意，在0.14+中，这些可以而且应该将性能放在组件外部，但在0.13中，它必须在渲染内部。

var theCurrentComponent = uploadStatusComponent[this.state.signed];