JSX条件渲染语法报错：组件中if语句触发Lint提示“unexpected token”

Alright, let's break down why your lint tool is yelling about that "unexpected token" error when you use an if statement in your JSX component. The core problem here is that JSX only supports JavaScript expressions, not statements—and an if is a statement, not an expression. That's why the parser chokes when it encounters it directly inside your JSX markup.

Here are the most common, lint-friendly ways to handle conditional rendering in JSX:

1. Ternary Operator (for two-way conditionals) #

Perfect when you need to render one thing if a condition is true, and another if it's false. It’s a concise expression that plays nicely with JSX:

function Greeting({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn ? <p>Welcome back, friend!</p> : <p>Please sign in to continue.</p>}
    </div>
  );
}

2. Logical AND (&&) (for "render only if true") #

Use this when you only want to render an element if a condition is met—no fallback needed. The && operator will return the JSX element if the condition is truthy, or null (which React ignores) if it’s falsy:

function Notifications({ hasUnreads }) {
  return (
    <div>
      <h2>Your Notifications</h2>
      {hasUnreads && <p>You have {hasUnreads} unread messages!</p>}
    </div>
  );
}

3. Extract Logic to a Separate Function #

For more complex conditional logic (like multiple if/else if branches), pull the logic out of your JSX into a dedicated function. This keeps your JSX clean and avoids parser errors:

function UserPanel({ userRole }) {
  const renderRoleContent = () => {
    if (userRole === 'admin') {
      return <div>Admin Dashboard: Manage users & settings</div>;
    } else if (userRole === 'editor') {
      return <div>Editor Hub: Create & publish content</div>;
    } else {
      return <div>User Profile: View your account details</div>;
    }
  };

  return (
    <div>
      <h3>User Panel</h3>
      {renderRoleContent()}
    </div>
  );
}

4. Store Conditional Content in a Variable #

Similar to the function approach, but you can use a variable to hold your conditional JSX before rendering it in the component. Great for simpler multi-branch logic:

function LoadingState({ isLoading }) {
  let content;
  if (isLoading) {
    content = <div className="spinner">Loading data...</div>;
  } else {
    content = <div className="data">Here's your requested content!</div>;
  }

  return <div>{content}</div>;
}

The main rule to remember: any conditional logic you want to include in JSX must be an expression, not a raw statement like if. Pick the method that best fits the complexity of your condition, and your lint tool should stop complaining.

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