Build Reactコンポーネント条件に基づいてインクリメンタルに

Question

私はオブジェクトの配列prjLvlDataを持っています。この配列には、条件付きで コンポーネントをレンダリングするために使用する情報が含まれています。私は3つのif文の終わりに、私が代わりにすべてのif文の中の復帰のビルドアップコンポーネントを返すように私はそれらを構築することができますどのように

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

を持っている私の.jsxファイルで

？

は私が

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

あなたが必要なタイトルを検出してからちょうど1 return文を使う計算するswitch文を使用することができます。

{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>; 
})}