Question

我仍然围绕着React。我正在制作文件上传组件。我希望组件在上传时显示三种不同的状态。我希望它最初显示选择文件输入字段，然后当用户提交该表单时，我希望它显示某种类型的＆＃34;上传...＆＃34;消息，最后当上传完成后，我想让它说出像＃34;完成的内容！＆＃34;

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

我是否应该按照相同的模式，根据需要使用尽可能多的渲染状态？这可能最终会产生一个巨大的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;

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

如何使React组件有超过2或3个状态等？

1 个答案: