跨度不能TBODY的孩子反應JS

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是一個'完整'和一堆'不完整'。

我在做什麼錯？

Answer 1

首先，你的呼叫在你的交換機功能返回！這將結束功能！我們需要一個工作示例，如果沒有這個，很難調試下一步，但是嘗試更改代碼，以便在開關盒中不使用「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>); } 

}); 

Answer 2

至於提到的其他的，你不需要在你的switch語句返回，只需設置labelClass變量。試試這個：

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