如何使用ReactJs撰寫不含else的三元運算子？

目前在我的代碼中，如果有資料，我將顯示細節，如（年份、標題、注冊和位置），如果沒有資料，我將在Prime部分下顯示沒有資料訊息，現在我想在沒有資料時隱藏整個部分的細節。

 const WpPrime=（{
      translate, memberships, otherDetails, selectedTemplate,
    }）=> (
      <section className="prime-section"/span>>
        <p className="section-title"/span>>
          {(otherDetails.section_title
            && otherDetails.section_title.prime)
        || translate('Premier')}
        </p> 
        {Array.isArray(memberships) && memberships.length > 0 ?
          會員資格
            .sort((a, b) => b.年-a.年)
            .map(item => (
              <div key={item.year || item.title } className={`two-column-section date-alignment-${otherDetails & & otherDetails. date_alignment}`}>
                < p className="section-sub-title" style={{ color:  getColor(selectedTemplate) }}>/span>
                  {item.years}
                </p> {item.year}
                <div className="section-description"/span>>
                  < p className="section-title-description" style={{ color:  getColor(selectedTemplate), fontWeight: '700' }}>/span>
                    {item.title}
                  </p>
                  <p>/span>
                    {item.registration ? ` ${item.registration}` : ''},
                    &nbsp;{item.location}.
                  </p>{item.location}。
                </div>/span>
              </div> 
            ))
        ) : (
          <p className="section-description"/span>> {translate('dataNotAvailable')}</p> 
        )}
      </section> )}</section>
    );

uj5u.com熱心網友回復：

你可以使用&&運算子來達到這個目的。如果條件為真，那么它將顯示資料。

const WpPrime=（{ 翻譯。 會員資格。 otherDetails, selectedTemplate, }）=> ( <section className="prime-section"/span>> <p className="section-title"/span>> {(otherDetails.section_title && otherDetails.section_title.prime) || translate("Premier")} </p> {Array.isArray(memberships)&& memberships.length > 0 && 會員資格 .sort((a, b) => b.year - a.year) .map((item) => ( <div。 key={item.year || item.title}。 className={`two-column-section date-alignment-${ otherDetails&& otherDetails.date_alignment }`} > <p className="section-sub-title"。 style={{ color: getColor(selectedTemplate) }} > {item.year} </p> <div className="section-description"/span>> <p> className="section-title-description"。 style={{ color: getColor(selectedTemplate), fontWeight: "700" }} > {item.title} </p> <p>/span> {item.registration ? ` ${item.registration}` : ""}, &nbsp; {item.registration ? {item.lotion} </p> </div>/span> </div> ))} </section>> );

uj5u.com熱心網友回復：

然后對整個部分進行三元操作：

<>
{Array.isArray(memberships) && memberships.length > 0 ? <section> ... </section>:null}。
</>

uj5u.com熱心網友回復：

你可以在else部分使用null或<></>（React Fragment標簽）。

{ your_condition ? render_what_you_want : null}。

或者

{ your_condition ? render_what_you_want : <></>}。

標籤：

上一篇：如何在欄位為空時顯示錯誤資訊-React

下一篇：如何讓WebhookJSON寫入CloudFirestore中？