哪种是处理嵌套条件渲染的最佳方法？

Question

我最近安装了 eslint-config-airbnb 并决定使用他们的风格指南来审查一个项目。由于不建议嵌套三元运算符，我发现自己正在转换以下块：

<div>
  { index === 0 ? <StatusButton big programmed statusText="Programmed" />
  : index === 1 ? <StatusButton big confirmed statusText="Confirmed" />
  : <StatusButton big soldOut statusText="Sold Out" />; }
</div>

转化为：

<div>
    {(() => {
      if (index === 0) {
        return (
          <StatusButton
            big
            programmed
            statusText="Programmato"
          />
        );
      }
      if (index === 1) {
        return (
          <StatusButton big confirmed statusText="Confermato" />
        );
      }
      return <StatusButton big soldOut statusText="Sold Out" />;
    })()}
</div>

规则 no-nested-ternary 的原因是使用 if 代码应该更容易阅读，但老实说，我认为那不是真的。由于我对 JS 的经验相对较少，所以我想了解您的观点。谢谢。

Answer 1

只需使用 switch case 语句。即

switch (index) {
case 0:
  return <StatusButton...

case 1:
  return <StatusButton...

default:
  return <StatusButton...
}

Answer 2

您可以通过多种方式呈现，

选项 - 1

const getStatusButton = (index) => {
  switch (index) {
    case 0: {
      return <StatusButton big programmed statusText="Programmato" />;
    }
    case 1: {
      return <StatusButton big confirmed statusText="Confermato" />;
    }
    default: {
      return <StatusButton big soldOut statusText="Sold Out" />;
    }
  }
};

所以渲染的时候可以调用这个函数

{
  getStatusButton(index);
}

选项 - 2

有一个功能可以给你不同的道具

const getStatusButtonProps = (index) => {
  switch (index) {
    case 0: {
      return {
        programmed: true,
        statusText: "Programmato",
      };
    }
    case 1: {
      return {
        confirmed: true,
        statusText: "Confermato",
      };
    }
    default: {
      return {
        soldOut: true,
        statusText: "Sold Out",
      };
    }
  }
};

现在您可以只使用一个状态按钮

<StatusButton big {...getStatusButtonProps(index)} />

Answer 3

这个怎么样

<div>
    <StatusButton
        big 
        programmed={index === 0}
        confirmed={index === 1}
        soldOut={index !== 0 || index !== 1}
        statusText={getStatusText(index)} />
</div>


getStatusText = (index) => {
    switch(index) {
        case 0: return "Programmed";
        case 1: return "Confirmed";
        default: return "Sold Out"
    }
}

哪种是处理嵌套条件渲染的最佳方法？

Which is the best approach to handle nested conditional rendering?

javascript

reactjs

if-statement

eslint

eslint-config-airbnb