【React】JSX中的逻辑运算符（&&、??、!!、!、?:、?.）

1. 逻辑与 &&

官方总结

In JSX, {cond ? <A /> : <B />} means “if cond, render <A />, otherwise <B />”.

用于「条件为真则渲染，否则什么都不渲染」，典型的条件渲染方式

原理

JS 中 true && expr 返回 expr，false && expr 返回 false，React 会把 false、null、undefined 看作“占位”并忽略渲染，因此常用于简洁控制渲染：

function Mailbox({ unreadMessages }) {
  return (
    <div>
      <h1>Hello!</h1>
      {unreadMessages.length > 0 && <h2>You have {unreadMessages.length} unread messages.</h2> }
    </div>
  );
}

这里如果 unreadMessages.length > 0 为 false，相应 <h2> 被跳过渲染。

注意事项

若左侧表达式返回 0、NaN 或空字符串等 falsy 值，这些值会被原样渲染，而不是被忽略。比如：{0 && <p>Hi</p>} 会渲染为 0 而非“空”

推荐写法：{unreadMessages.length > 0 && ...} 或强制布尔化 {!!value && ...} 来避免异常场景

补充：强制布尔化!!

!! 在 JS中是一个双重逻辑非运算符，常用于将一个值强制转换为布尔值。

例如

{!!xxx && <Component />}

等价于

{Boolean(xxx) && <Component />}

它的作用是：

• 如果 xxx 是 truthy（如非空字符串） → 渲染
• 如果 xxx 是 falsy（如空字符串、null、undefined） → 不渲染任何东西

通常用于增强代码可读性，即我只关心 xxx 的值是否为真，不依赖其本身

2. 三元运算符 ? :

官方文档总结为

In JSX, {cond ? <A /> : <B />} means “if cond, render <A />, otherwise <B />”.

即适用于需要在两个不同结果之间选择的情况，例如

function Greeting({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn
        ? <LogoutButton />
        : <LoginButton />
      }
    </div>
  );
}

适合有“要渲染 A 或渲染 B 的需求”时使用

3. 逻辑或 ||

用来提供默认值，例如

const displayName = user.name || '匿名用户';
return <span>Hello, {displayName}</span>;

• 如果user.name值为假值（包含null、undefined、0、""、NaN、false），displayName的值为 ‘匿名用户’
• 如果user.name值为真，displayName的值为 user.name

可以理解为当左侧返回值为假（falsy），返回右侧，即用于在左侧为「假值」时提供一个「默认值」，非常常用于给变量赋值或渲染时做兜底处理。

再举个例子加深理解，一个来自reddit上的非典型案列

 <Query query={LOCAL_STATE_QUERY}>
      {({ data }) =>
        console.log(data) || (
          <Component />
        )
      }
    </Query>

有个评论总结地很好：

"console.log doesn’t return anything. so its value in the expression will be undefined, which is falsy. So yeah, use OR to say ‘do both things’.”

总的来说，console.log(data) 和 都会被执行渲染，因为 console.log( ) 在表达式中返回undefined（falsy），所以总是会渲染

这是开发时的一个调试技巧，但生产环境不建议这样使用

4. 逻辑非 !

主要用于布尔取反，常与 && 或 ? : 配合使用

{!isLoading && <Content />}

5. nullish 合并运算符??

用来为 null 或 undefined 提供默认值。

含义： a ?? b

若 a 不是 null 且不是 undefined，返回 a，否则返回 b

可以想象成：

result = (a !== null && a !== undefined) ? a : b;

使用场景

1. 提供默认值

let user;
alert(user ?? "Anonymous"); // "Anonymous"
user = "John";
alert(user ?? "Anonymous"); // "John"

即只有当变量是 null 或 undefined 时，才会用默认值替补，否则不会影响像 0 或空字符串等“有效值”。

1. 链式合并

let f = firstName ?? lastName ?? nickName ?? "Anonymous";

这将返回第一个不为 null/undefined 的变量

1. ??= (nullish 合并赋值运算符)

x ??= y; // 若 x 是 null 或 undefined，则 x = y

它只在左边是 nullish 时赋值，否则跳过

?? 与 || 的对比

?? 保留有效的 “0”、false、“ ”

const a = 0;
console.log(a || 42); // 42
console.log(a ?? 42); // 0 

6. ?. 可选链运算符

用于安全地访问深层属性或调用可能不存在的方法。

含义a?.b

表示：如果a不是null获undefined，则返回a.b ，否则返回undefined，不会报错

使用场景

安全地访问API返回的嵌套数据，避免组件渲染崩溃，如

<p>{user?.profile?.name || '匿名'}</p>

但如果需要默认值，请配合 || 或 ??

{user?.profile?.age ?? '年龄未知'}

注意

1. 不能用于赋值左值。如 user?.name = 'Tom' 是非法的
2. 需确保变量已声明。若根对象未声明，将报 ReferenceError，可选链无法解决未声明变量的问题
3. 不要过度依赖。可选链会掩盖真正的缺失对象，可能隐藏 bug，只有在逻辑允许对象为 undefined 时才使用，避免滥用

7. 禁止渲染return null

如果整个组件不想渲染任何内容，可返回 null：

function WarningBanner({ warn }) {
  if (!warn) return null;
  return <div className="warning">Warning!</div>;
}

该方式等于在 render 中返回一个空“洞”

参考

https://react.dev/learn/conditional-rendering

https://javascript.info/nullish-coalescing-operator

https://www.reddit.com/r/reactjs/comments/ankepy/what_does_logical_or_do_in_jsx/