jsx中的复杂条件将prop传递给组件答案

【问题标题】：complication conditioning in jsx passing prop to componentjsx中的复杂条件将prop传递给组件
【发布时间】：2018-02-18 21:36:57
【问题描述】：

如果 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 添加一个隐藏类。

【问题讨论】：

你试过将 div 包裹在地图中吗？
@MatheusSilva 尝试但失败了。
当渲染逻辑开始变得更加复杂时，我认为将其拆分成单独的函数会更容易（也更易读）。
@ThianKianPhin 照 daniel 说的做，尝试拆分成单独的方法。一个是过滤对象，另一个是传递对象并构建代码的<div><p 部分

标签： javascript reactjs ecmascript-6 jsx

【解决方案1】：

添加一个额外的过滤器，用于在将其映射到 JSX 之前将具有空 expiry_date 的任何项目删除到您的 ads 数组中：

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

这能解决您的问题吗？如果没有，请告诉我您的具体想法。

【讨论】：

还在，这如何解决我的问题？