jsx中的並發症條件將prop傳遞給組件

Question

如果expiry_date為null或未定義，如何將類添加到內容的<div> ？ 這具有挑戰性，因為我必須先過濾然后再做地圖，我迷路了。

{openApplyModal && <ConfirmModal 
          visible={openApplyModal}
          title={'Take this task'}
          handleCancel={this.handleCancelApply}
          handleOk={this.handleApplyAd}
          loading={loading}
          error={error}
          content={
            <div>
              {error ? error :
              <div>
                <p>{ads.filter(obj => obj._id === this.state.selectedAd_Id).map(obj => obj.expiry_date ? `You have to complete this task in ${fromNow(moment(obj.expiry_date))}` : '' )}</p>
              </div>}
            </div>
          }
        />}

上面的代碼沒有任何問題，它起作用了，但是如果沒有expiry_date，則輸出''將留下一個空的模式，這就是為什么我要向div添加一個隱藏類的原因。

Answer 1

在JSX expiry_date其映射出來之前，添加一個額外的過濾器以消除expiry_date為空的所有項目到您的廣告數組：

content={
 <div>
 {error ? error :
  <div>
   <p>{ads
        .filter(obj => obj._id === this.state.selectedAd_Id)
        .filter(obj => !!obj.expiry_date)
        .map(obj => `You have to complete this task in ${fromNow(moment(obj.expiry_date))}`)}
  </p>
   </div>}
 </div>
}

這樣可以解決您的問題嗎？ 如果沒有，請告訴我您的確切想法。