Построить компоненты реагирования Постепенно в зависимости от условий

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 или короткая функция JavaScript, может сделать это:

Вот пример:

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