React中三元运算符条件判断返回布尔值的代码修正求助

原代码错误原因 #

你写的代码逻辑存在问题：(lightstasut1error || lightstasut2error || lightstasut3error) 这个表达式会返回第一个非空的字符串值（因为"Y"和"N"都是非空字符串，属于真值）。比如如果第一个变量是"Y"，整个表达式结果就是"Y"，和"N"比较自然返回false，哪怕后面的变量是"N"也不会被判断到，这就是为什么存在"N"时始终返回false的原因。

修正后的代码 #

方式1：直接利用布尔表达式（推荐） #

因为判断条件本身就会返回布尔值，不需要额外用三元运算符转换，代码更简洁：

const errors2 = lightstasut1error === "N" || lightstasut2error === "N" || lightstasut3error === "N";

方式2：保留三元运算符（满足你的需求） #

如果一定要用三元运算符形式，只需把每个变量的判断单独写出来再用逻辑或连接：

const errors2 = (lightstasut1error === "N" || lightstasut2error === "N" || lightstasut3error === "N") ? true : false;

React中三元运算符的基础用法示例 #

在React的JSX语法中，三元运算符常用于条件渲染，比如根据errors2的值展示不同内容：

function LightStatus() {
  const lightstasut1error = "Y";
  const lightstasut2error = "N";
  const lightstasut3error = "Y";
  const errors2 = lightstasut1error === "N" || lightstasut2error === "N" || lightstasut3error === "N";

  return (
    <div>
      {errors2 ? (
        <span style={{ color: "red" }}>存在灯光故障</span>
      ) : (
        <span style={{ color: "green" }}>所有灯光正常</span>
      )}
    </div>
  );
}

内容的提问来源于stack exchange，提问作者user19476497