構建反應組件根據條件遞增

Question

我有一個對象數組prjLvlData。此數組包含我用於有條件地渲染組件的信息。

在我.jsx文件我有

   {prjLvlData.map(ele => { 

       if (ele.fields.level_exp === 'portfolio' && ele.fields.has_experience) { 
        return <div className="btn btnAddBadge button noCursor projectLevelBtn active" id={`btnPortfolio${id}`}>Portfolio</div> 
       } else { 
        return <div className="btn btnAddBadge button noCursor projectLevelBtn" id={`btnPortfolio${id}`}>Portfolio</div> 
       } 
       if (ele.fields.level_exp === 'program' && ele.fields.has_experience) { 
        return <div className="btn btnAddBadge button noCursor projectLevelBtn active" id={`btnProgram{id}`}>Program</div> 
       } else { 
        return <div className="btn btnAddBadge button noCursor projectLevelBtn " id={`btnProgram{id}`}>Program</div> 
       } 
       if (ele.fields.level_exp === 'project' && ele.fields.has_experience) { 
        return <div className="btn btnAddBadge button noCursor projectLevelBtn active" id={`btnProject${id}`}>Project</div> 
       } else { 
        return <div className="btn btnAddBadge button noCursor projectLevelBtn" id={`btnProject${id}`}>Project</div> 
       } 
       })} 

如何建立他們，使由3條if語句的結束，我回到改爲每if語句內返回建成組件，？

我想是這樣的，在僞代碼

var component = <div> 

if (...) 
    component += thing1 
if (...) 
    component += thing2 

return component + <div> 

Answer 1

你可以返回元素的數組：

{prjLvlData.map(ele => { 
    const elements = []; 

    if (ele.fields.level_exp === 'portfolio' && ele.fields.has_experience) { 
    elements.push(<div className="btn btnAddBadge button noCursor projectLevelBtn active" id={`btnPortfolio${id}`}>Portfolio</div>) 
    } 

    // etc... 

    return elements; 
)} 

這發生在一個map裏面，所以你需要扁平化陣列到一個嵌套級別嵌入到另一個組件中。一個實用程序庫像lodash或short JavaScript function能做到這一點：

下面是一個例子：

const nestedElements = prjLvlData.map(/* function from above */); 
const flatElements = flatten(nestedElements); 

const rendered = <p> 
    {flatElements) 
</p> 

Answer 2

您可以使用switch語句來計算檢測所需的標題，然後只使用一個return語句：

{prjLvlData.map(ele => { 
    const active = ele.fields.has_experience ? 'active' : ''; 
    let title = ''; 

    switch (ele.fields.level_exp) { 
     case 'portfolio': 
      title = 'Portfolio'; 
      break; 

     case 'program': 
      title = 'Program'; 
      break; 

     case 'project': 
      title = 'Project'; 
      break; 
    } 

    return <div className={`btn btnAddBadge button noCursor projectLevelBtn ${active}`} id={`btnProject${id}`}>{title}</div>; 
})}