如何在React JSX中设置多条件判断？

你的代码报错是因为嵌套三元表达式里多余包裹了一层{}——JSX中进入{}的表达式上下文后，内部的JS逻辑不需要重复加{}，多余的括号会触发语法解析错误。

方法1：正确的嵌套三元表达式 #

直接简化嵌套结构，去掉多余的{}，同时注意React中要用className替代class：

{isAdmin() ? (
  <>
    <a href="/profile">admin</a>  
    <div className='container'></div>
  </>         
) : isAdminTwo() ? (
  <>
    <a href="/profile">admin2</a>  
    <div className='container'></div>
  </>         
) : isAdminThree() ? (
  <>
    <a href="/profile">admin3</a>  
    <div className='container'></div>
  </>         
) : (
  <>
    <a href="/profile">user</a>
    <div className='container'></div>
  </>
)}

方法2：提取为独立函数（可读性更佳） #

如果条件分支较多，把逻辑抽成单独函数，代码更清晰易维护：

const renderProfileSection = () => {
  if (isAdmin()) {
    return (
      <>
        <a href="/profile">admin</a>  
        <div className='container'></div>
      </>
    );
  } else if (isAdminTwo()) {
    return (
      <>
        <a href="/profile">admin2</a>  
        <div className='container'></div>
      </>
    );
  } else if (isAdminThree()) {
    return (
      <>
        <a href="/profile">admin3</a>  
        <div className='container'></div>
      </>
    );
  } else {
    return (
      <>
        <a href="/profile">user</a>
        <div className='container'></div>
      </>
    );
  }
};

// 在JSX中调用函数
{renderProfileSection()}

方法3：使用立即执行函数（IIFE） #

如果不想单独写函数，也可以用立即执行函数直接嵌入JSX：

{(() => {
  if (isAdmin()) {
    return (
      <>
        <a href="/profile">admin</a>  
        <div className='container'></div>
      </>
    );
  } else if (isAdminTwo()) {
    return (
      <>
        <a href="/profile">admin2</a>  
        <div className='container'></div>
      </>
    );
  } else if (isAdminThree()) {
    return (
      <>
        <a href="/profile">admin3</a>  
        <div className='container'></div>
      </>
    );
  } else {
    return (
      <>
        <a href="/profile">user</a>
        <div className='container'></div>
      </>
    );
  }
})()}

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