如何使反应组分有2或3个以上的状态等？

Question

我还在绕着头反应呢。我在做一个文件上传组件。我希望组件在上传时显示三种不同的状态。我希望它最初显示select文件输入字段，然后当用户提交该表单时，我希望它显示某种“上传.”最后，当上传完成后，我希望它能说“完成！”

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

我是否应该遵循同样的模式，直到需要时达到尽可能多的呈现状态？这可能会有一个巨大的“如果-否则”块，那就好了？

这是我的上下文组件..。

/**
 * 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;

Answer 1

是的，但是你可以做更多关于if ... else ...的事情

可以编写如下所示的对象

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

然后使用状态获取正确的组件，如

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

然后你就可以摆脱if else或switch case了