Javascript span不能是react js中tbody的子级 嗯，这似乎不对，但是考虑下面的内容： 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>); } });

我相信这是爆炸性的。如果我将类名替换为：

评论一下开关的情况，然后世界似乎很好

然后一切都开始了

对于此特定循环，值为：tabData.investments.data[0]。状态为一个“已完成”和一组“未完成”

---

我做错了什么？

首先，你在开关函数中调用return！这将结束函数！！我们需要一个工作示例，如果没有此示例，下一步很难调试，但请尝试更改代码，以便在交换机案例中不使用return，并查看这是否解决了问题，此示例尚未测试，但我建议您尝试以下代码：

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>);   }

});

---

正如前面提到的，您不需要在switch语句中返回，只需设置labelClass变量。试试这个：

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

---

首先，你正在做一个在你的开关函数返回！这将结束函数！！我们需要一个工作示例，如果没有这个示例，下一步很难调试，但是请尝试更改代码，这样您就不会在交换机案例中使用return！–您将在此处得到一个不带引号的类属性值。如果您满意并且我们已帮助解决了此问题，请选择一个答案。为什么两个答案都被否决，而没有选择任何内容作为答案？

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>);   }

});

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