自定义JSX元素编写条件时遇Parsing error: Unexpected token报错求助

你遇到的错误是因为JSX的花括号{}内只能放置表达式，不能直接写控制流语句。if属于控制流语句，不是能返回值的表达式，所以解析器会报错。

下面是几种可行的修复方案：

方案1：使用三元运算符（适合需要else分支的场景） #

如果需要在offer为空和非空时分别渲染不同内容，用三元运算符最直接：

<div>
  {offer.length === 0 ? (
    <p>Тут пока пусто</p>
  ) : (
    // 这里添加offer有内容时的渲染代码
    <div>В корзине есть товары</div>
  )}
</div>

方案2：使用逻辑与运算符&&（仅需if分支的场景） #

如果只有offer为空时需要渲染提示，其他情况什么都不做，用&&更简洁：

<div>
  {offer.length === 0 && <p>Тут пока пусто</p>}
</div>

方案3：抽成独立函数（复杂逻辑场景） #

如果条件判断逻辑比较复杂，把渲染逻辑抽成单独函数会让代码更清晰：

import React, { useState } from 'react';
import './Cart.css';

function Cart ({active, setActive, offer}) {
  // 单独定义渲染逻辑函数
  const renderCartEmptyTip = () => {
    if (offer.length === 0) {
      return <p>Тут пока пусто</p>;
    }
    // 这里可以添加更多复杂判断和渲染内容
    return null;
  };

  return (
    <div className={active ? 'cart active' : 'cart'} onClick={() => setActive(false)}>
      <div className="cart__content" onClick={e => e.stopPropagation()}>
        <h1 className='cart__content-header'>Ваша корзина</h1>
        <div>{renderCartEmptyTip()}</div>
        <button className='cart__content-button'>Оформить заказ</button>
      </div>
    </div>
  );
}

export default Cart;

另外建议把代码里的==换成===，避免隐式类型转换可能带来的意外问题。

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