如何在 React 中用三元运算符替换 if 语句？

Question

我是 ReactJS 的初学者，我在使用三元运算符时遇到了麻烦。

我找不到在此代码中使用三元运算符（？ :) 的更好解决方案，当我尝试时，我收到错误或我的代码不工作（不显示类型）。

我的代码（如果其他）一切正常：

const TypeChecker = (product) => {
    if (
      product.width === null &&
      product.length === null &&
      product.height === null
    ) {
    } else {
      return (
        <div>
          Dimensions: {product.width} x {product.length} x {product.height}
        </div>
      );
    }

    if (product.size === null) {
    } else {
      return <div>Size: {product.size} MB</div>;
    }

    if (product.weight === null) {
    } else {
      return <div>Weight: {product.weight} KG</div>;
    }
  };

 return (
    <div>
      <div className="productContainer">
        {products.map((product, key) => (
          <div key={key} className="productCard" id="product">
            <input
              type="checkbox"
              onChange={handleChange}
              id="delete-checkbox"
              value={product.id}
              className="removeCardCheckbox cardItem delete-checkbox"
            />

            <div className="cardItem">{product.sku}</div>
            <div className="cardItem">{product.name}</div>
            <div className="cardItem">{product.price} $</div>
        
              {TypeChecker(product)} //Here show type if it no null

            <div className="CardButtons">
              <button
                onClick={() => deleteProduct(product.id)}
                className="btn btn-primary btn-sm m-2"
              >
                Delete
              </button>
            </div>
          </div>
        ))}
    </div>
    </div>
  );

例如，使用检查器之一的三元运算符：

 product.width === null &&
    product.length === null &&
    product.height === null ? (
      console.log("This is furniture")
    ) : (<div>
        Dimensions: {product.width} x {product.length} x {product.height}
      </div>)

在这种情况下，我收到错误 Uncaught TypeError: (0, react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxDEV)(...) is not a function

请帮助我理解我的错误是什么:(

Answer 1

如果目标是将整个 function 变成三元条件表达式......

首先，颠倒你的条件。 像这样的结构很奇怪，并且使您的代码更难以修改/支持（正如您所发现的那样）：

if (product.size === null) {
} else {
  return <div>Size: {product.size} MB</div>;
}

没有理由总是将逻辑放在else块中。 if块可以并且应该包含逻辑。 所以把上面的改成这样：

if (product.size !== null) {
  return <div>Size: {product.size} MB</div>;
}

对其他条件做同样的事情。 那么你的 function 本质上是三个条件return语句。 可以使用链式条件运算符将其转换为一个return语句：

const TypeChecker = (product) =>
  (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;

这是否比原始版本更具可读性或更容易修改/支持（当然是在颠倒条件之后）是一个见仁见智的问题。 真的没有必要把所有的条件代码都转换成三元条件表达式。 后者不是前者的直接替代品。