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

这样可以解决您的问题吗？ 如果没有，请告诉我您的确切想法。