React JSX 中的 IF else && 语句

Question

大家好，我无法理解如何在 React 中创建 IF else & 语句。我在网上找到的所有文档、视频和问题都只展示了其中一种方法，要么是 IF else，要么是 &&

基本上，我尝试在 JSX 中创建的 IF 语句如下所示。

If(data.AP == "1" && data.MP == "1")
{
set.Text("Both")
}
else if(data.AP == "0" && data.MP == "1")
{
set.Text("Manager")
}
else if(Data.AP == "1" && data.MP == "0")
{
set.Text("Payroll")
}
else{
setText("Not Approved)
}

Java 中的一个相当简单的 IF 语句，但我似乎找不到将其转换为 JSX 的方法。到目前为止，这是我得到的最远的，每当我根据我正在阅读的文档进行修改和更改时，它总是给我错误。我知道怎么用？？三元运算符和 && 运算符，但一起使用它们似乎对我不起作用。

 return (

   {
  data.MP == "1" && data.AP == "1" && (
     <td colSpan="1">{"Both"}</td> ) : null
  }

)

Answer 1

您可以根据需要连接任意多个 if else：

data.AP == "1" && data.MP == "1" ? FIRST THEN HERE :
  data.AP == "0" && data.MP == "1" ? SECOND THEN HERE :
    data.AP == "1" && data.MP == "0" ? THIRD THEN HERE :
      ELSE THEN HERE

用所需的表达式替换文本

Answer 2

我建议您这样做：

let text;
if (data.AP == "1" && data.MP == "1") {
    text = "Both";
} else if (data.AP == "0" && data.MP == "1") {
    text = "Manager";
} else if (data.AP == "1" && data.MP == "0") {
    text = "Payroll";
} else {
    text = "Not Approved";
}
// ...then when you want to display it:
{text}

...因为它易于阅读和调试。

但是如果你真的想把它嵌入{...}，你可以使用一系列嵌套的条件运算符：

{
    data.AP == "1" && data.MP == "1"
    ? "Both"
    : data.AP == "0" && data.MP == "1"
        ? "Manager"
        : data.AP == "1" && data.MP == "0"
            ? "Payroll"
            : "Not Approved"
}

虽然你可以让它相当可读（虽然不是很容易调试）：

{
      data.AP == "1" && data.MP == "1" ? "Both"
    : data.AP == "0" && data.MP == "1" ? "Manager"
    : data.AP == "1" && data.MP == "0" ? "Payroll"
    :                                    "Not Approved"
}

如果您使用自动代码格式化程序，它可能会重新格式化它。

React JSX 中的 IF else && 语句

IF else && statement in React JSX

javascript

jsx

reactjs