Question

嗯，这看起来不对，但请考虑以下因素：

var InvestmentTransactionsTableRows = React.createClass({

  render: function() {

    var sliceStart = 0;
    var sliceEnd = this.props.amountToShow

    if (this.props.onCurrentPage !== 1) {
        sliceStart = Math.round(((this.props.onCurrentPage - 1) * this.props.amountToShow));
        sliceEnd = Math.round(this.props.onCurrentPage * this.props.amountToShow);
    }

    var tableRows = this.props.tabData.slice(sliceStart, sliceEnd).map(function(tabData) {
      var labelClass = 'label-default';

      switch(tabData.investments.data[0].status) {
        case 'complete':
          return labelClass = 'label-success';
        case 'pending':
          return labelClass = 'label-warning';
        default:
          return labelClass = 'label-default';
      }

      return(
        <tr key={tabData.id}>
          <td>{"$" + tabData.investments.data[0].amount_invested_by_user.toLocaleString()}</td>
          <td>{tabData.full_name}</td>
          <td><span className="label label-default">{tabData.profile.data.investor_type}</span></td>
          <td><span className={"label " + labelClass}>{tabData.investments.data[0].status}</span></td>
          <td>{moment(tabData.updated_at).format('MMMM Do YYYY, h:mm:ss a')}</td>
          <td><a href={"//" + location.hostname + "/admin/issuers-portal/investors/" + tabData.id + "/investments"}>View Transaction</a></td>
        </tr>
      )
    });

    return(<tbody>{tableRows}</tbody>);
  }

});

在其中一个td中我做了：

<td><span className={"label " + labelClass}>{tabData.investments.data[0].status}</span></td>

我相信它会爆炸。如果我将className替换为：

<td><span className="label label-default">{tabData.investments.data[0].status}</span></td>

并注明了开关案例然后世界似乎很好......

然后一切正常。

对于这个特定的循环，tabData.investments.data[0].status的值是一个完整的＆＃39;还有一堆不完整的＆＃39;。

我做错了什么？

Answer 1

首先，你要在你的开关功能中调用return！这将结束功能!!我们需要一个工作样本，如果没有这个，很难调试下一步，但尝试更改代码，这样你就不会使用＆＃34; return＆＃34;在你的交换机案例中，看看是否能解决问题，这还没有经过测试，但我建议你试试这个代码：

var InvestmentTransactionsTableRows = React.createClass({

  render: function() {

    var sliceStart = 0;
    var sliceEnd = this.props.amountToShow

    if (this.props.onCurrentPage !== 1) {
        sliceStart = Math.round(((this.props.onCurrentPage - 1) * this.props.amountToShow));
        sliceEnd = Math.round(this.props.onCurrentPage * this.props.amountToShow);
    }

    var tableRows = this.props.tabData.slice(sliceStart, sliceEnd).map(function(tabData) {
      var labelClass = 'label-default';

      switch(tabData.investments.data[0].status) {
        case 'complete':
          labelClass = 'label-success';
        case 'pending':
          labelClass = 'label-warning';
        default:
          labelClass = 'label-default';
      }

      return(
        <tr key={tabData.id}>
          <td>{"$" + tabData.investments.data[0].amount_invested_by_user.toLocaleString()}</td>
          <td>{tabData.full_name}</td>
          <td><span className="label label-default">{tabData.profile.data.investor_type}</span></td>
          <td><span className={"'label " + labelClass + "'"}>{tabData.investments.data[0].status}</span></td>
          <td>{moment(tabData.updated_at).format('MMMM Do YYYY, h:mm:ss a')}</td>
          <td><a href={"//" + location.hostname + "/admin/issuers-portal/investors/" + tabData.id + "/investments"}>View Transaction</a></td>
        </tr>
      )
    });

    return(<tbody>{tableRows}</tbody>);   }

});

Answer 2

正如其他人所提到的，您不需要在switch语句中返回，只需设置switch(tabData.investments.data[0].status) { case 'complete': labelClass = 'label-success'; case 'pending': labelClass = 'label-warning'; default: labelClass = 'label-default'; }变量即可。试试这个：

errorDomain = yourMethodOfRequestingStatus

span不能成为反应中的tbody的孩子

2 个答案: