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

根据条件增量构建React组件

2 个答案: