React新手求助：如何用三元运算符替代if语句？

报错原因 #

你遇到的Uncaught TypeError: jsxDEV(...) is not a function错误，核心原因是三元表达式的条件部分未加括号，导致运算符优先级错乱。JavaScript中&&的优先级高于?:，你的代码会被解析成不符合预期的运算顺序，进而导致React对JSX元素的渲染逻辑出错。另外，用console.log作为三元的分支返回值仅适合调试，它返回undefined，对页面渲染无实际意义。

原有逻辑分析 #

你的TypeChecker函数逻辑是：

1. 优先检查尺寸属性（width/length/height），只要有一个不为null，就返回尺寸展示元素
2. 若尺寸都为null，检查size属性，不为null则返回size展示元素
3. 若size也为null，检查weight属性，不为null则返回weight展示元素
4. 所有属性都为null时，返回空（不渲染任何内容）

正确改写方式 #

方式1：嵌套三元运算符（最贴近原有if-else逻辑） #

const TypeChecker = (product) => {
  return !(product.width === null && product.length === null && product.height === null) ? (
    <div>Dimensions: {product.width} x {product.length} x {product.height}</div>
  ) : product.size !== null ? (
    <div>Size: {product.size} MB</div>
  ) : product.weight !== null ? (
    <div>Weight: {product.weight} KG</div>
  ) : null;
};

方式2：逻辑&&短路求值（更简洁） #

利用逻辑&&的短路特性：只要前面的条件为真，就返回后面的JSX元素，后续判断不再执行；若条件为假，则继续执行后面的||判断，最终都不满足则返回null（React渲染null时不显示任何内容）。

const TypeChecker = (product) => {
  return (
    (!(product.width === null && product.length === null && product.height === null) &&
      <div>Dimensions: {product.width} x {product.length} x {product.height}</div>
    ) ||
    (product.size !== null && <div>Size: {product.size} MB</div>) ||
    (product.weight !== null && <div>Weight: {product.weight} KG</div>) ||
    null
  );
};

单个判断的正确写法（针对你尝试的单分支） #

如果只是单独改写尺寸判断，必须给整个条件加括号，同时将无渲染分支改为返回null：

// 正确的单分支三元写法
(product.width === null && product.length === null && product.height === null) ? 
  null : 
  <div>Dimensions: {product.width} x {product.length} x {product.height}</div>

调用方式不变 #

你的原有调用代码无需修改，依然可以正常使用：

{TypeChecker(product)}

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