北京
代码里最常见的这几行，正在逼疯前端——
function Item({ name, isPacked }) {if (isPacked) {return
{name}✔
return
{name}
一个打包状态就要把整个组件 return 写两遍。一个判断还好，三个条件叠加，页面还没崩，人先崩了。
这就是 React 条件渲染的现实。根据用户登录状态、权限、数据是否就绪，决定 UI 该显示什么，本来就是前端的基本功。但光是“怎么写”这件事，就能整出三种画风，不少新手抄代码抄到怀疑人生：明明功能一样，到底怎么选？
下面这三种方式，就完整覆盖了官方文档里给出的实现路径。没有“最好”，只有“最配当前场景”。
方式一：if/else 语句——最老实，也最啰唆
这是最像 JavaScript 的写法，直接用 if/else 控制函数的返回路径。
当 isPacked 为 true，返回带 ✔ 的列表项；为 false，返回不带标记的同名项。
这种方式的好处是，什么复杂逻辑都能往条件里扔，多层判断、组合条件、提前 return——全都支持。问题是，一旦条件变多，组件里塞满了 return，可读性断崖式下跌。而且 if/else 不能直接写在 JSX 里，只能搁在组件函数体中，意味着 JSX 的结构硬生生被撕成好几块。
所以官方也说了：万能用，但要警惕写成面条代码。
方式二：三元运算符——最省行数，也最容易被滥用
一行搞定两个分支，React 里的高频写法就是这个：
function Greeting({ isLoggedIn }) {return {isLoggedIn ? "Welcome Back!" : "Please Sign In"};
逻辑极其简单：登录了就显示“欢迎回来”，否则显示“请登录”。
三元在 JSX 里直接内联，不需要额外拆函数，特别适合只有两个互斥选项的时候。但是，一旦链式嵌套——比如 status === 'loading' ? : status === 'error' ? : ——代码立刻开始报复社会。这玩意儿单行长起来，看一眼能蒙三天。
所以原文给出的定位很准：只适用于简单、二选一的逻辑，别把它当成万能瘦身工具。
方式三：逻辑与（&&）运算符——最偷懒，也最容易翻车
当你的需求是“只有条件成立才显示点什么”，&& 就是最痛快的写法。
function Notification({ hasNotifications }) {return (
Welcome{hasNotifications &&
You have new notifications!
hasNotifications 为 true 时才渲染那条消息提示，否则整个
都不渲染。
这种写法的思维成本极低：就一行表达式，不用 else，不用问号。但它在 React 文档里也带着一个隐含的雷：&& 前面的表达式如果得到的是数字 0 或者空字符串，React 照样会把它渲染出来。很多新人在这里栽过跟头——明明判断条件没满足，页面却冒出来一个莫名其妙的 “0”。
所以只要用的是 &&，脑子里的弦就得绷紧：你判断的到底是布尔值，还是可能被原始值坑一把的表达式。
不纠结选型，捋清楚方向就行
把这三种方式摆齐之后，选哪一个其实相当直白：
条件复杂、分支多：用 if/else，老老实实排逻辑，别耍小聪明。
必二选一、逻辑单纯：三元运算符，代码短，维护成本也低。
只在其条件为真时才渲染：&& 是最直接的，前提是别拿 falsy 值当布尔用。
React 的条件渲染本质上就是 JavaScript 表达式的延伸，没有魔法，只有判断和返回。出错的从来不是写法本身，是你拿着三元嵌套五层还在怪框架。
特别声明：以上内容(如有图片或视频亦包括在内)为自媒体平台“网易号”用户上传并发布，本平台仅提供信息存储服务。
Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.
