React 中如何优雅地处理条件渲染？

一句话总结：三元表达式适合「二选一」，&& 适合「显示/隐藏」，立即执行函数 IIFE 复杂逻辑兜底，抽出子组件才是终极方案。别在 JSX 里写 if-else，用对了方式条件渲染既干净又不容易出 bug！

正文目录

1. 条件渲染有哪些方式？
2. 5 大高频场景 & 代码示例
3. 万能兜底：条件渲染决策表
4. 预防 checklist（不再踩坑）
5. 一句话总结

一、条件渲染有哪些方式？

问题背景：JSX 本质是 JavaScript，不能直接写if-else，React 提供了多种条件渲染方式，但用错了会导致渲染异常、性能浪费或代码可读性差。

// ❌ 错误：JSX 中不能直接写 if-else function App({ status }) { return ( <div> if (status === 'loading') { // 这会被当字符串渲染！ <Loading /> } </div> ) }

二、5 大高频场景 & 代码示例

场景 1：加载状态 → 用 &&

最常见场景：数据没加载完显示 Loading，加载完显示内容。

// ✅ 正确：&& 适合「满足条件才显示」 function UserList({ users, loading }) { return ( <div> {loading && <Spinner />} {!loading && users.map(u => <div key={u.id}>{u.name}</div>)} </div> ) }

// ❌ 错误：&& 与数字 0 的坑 function App({ count }) { return ( <div> {count && <Badge text={count} />} </div> ) } // count 为 0 时，渲染出 "0" 而不是什么都不显示！

// ✅ 正确：避免 0 的坑 function App({ count }) { return ( <div> {count > 0 && <Badge text={count} />} {/* 或 */} {!!count && <Badge text={count} />} </div> ) }

场景 2：二选一 → 用三元表达式

登录/未登录、有数据/空状态，用三元最清晰。

// ✅ 正确：三元表达式二选一 function Greeting({ user }) { return ( <div> {user ? <Welcome name={user.name} /> : <LoginButton />} </div> ) }

// ❌ 不推荐：&& 叠 && 实现二选一 function Greeting({ user }) { return ( <div> {user && <Welcome name={user.name} />} {!user && <LoginButton />} </div> ) } // 能用但啰嗦，且两个条件都执行

场景 3：多状态切换 → 用对象映射

loading / success / error 三种状态，用对象映射比 if-else 优雅得多。

// ✅ 正确：对象映射，清晰优雅 function StatusView({ status, data, error }) { const statusMap = { loading: <Spinner />, success: <DataList data={data} />, error: <ErrorMessage error={error} />, empty: <EmptyState /> } return <div>{statusMap[status] ?? <DefaultView />}</div> }

// ❌ 糟糕：嵌套三元表达式，难以阅读 function StatusView({ status, data, error }) { return ( <div> {status === 'loading' ? <Spinner /> : status === 'success' ? <DataList data={data} /> : status === 'error' ? <ErrorMessage error={error} /> : <EmptyState />} </div> ) }

场景 4：复杂条件逻辑 → 抽子组件

条件里有循环、有副作用、有复杂判断，抽成子组件最清晰。

// ✅ 正确：复杂逻辑抽子组件 function ProductList({ products, filter, sort }) { return ( <div> <ProductGrid products={products} filter={filter} sort={sort} /> </div> ) } function ProductGrid({ products, filter, sort }) { const visible = products .filter(filter) .sort(sort) if (visible.length === 0) { return <EmptyState message="没有符合条件的商品" /> } return ( <ul> {visible.map(p => ( <li key={p.id}>{p.name} - ¥{p.price}</li> ))} </ul> ) }

// ❌ 糟糕：在 JSX 里塞一堆逻辑 function ProductList({ products, filter, sort }) { return ( <div> {(() => { const visible = products.filter(filter).sort(sort) if (visible.length === 0) { return <EmptyState message="没有符合条件的商品" /> } return ( <ul> {visible.map(p => ( <li key={p.id}>{p.name} - ¥{p.price}</li> ))} </ul> ) })()} </div> ) } // IIFE 能用但可读性差，lint 也不推荐

场景 5：条件 className → 用工具函数

条件渲染不只是组件，className 的条件拼接也是高频场景。

// ✅ 正确：用 clsx / classnames 工具 import clsx from 'clsx' function Button({ variant, size, disabled, children }) { return ( <button className={clsx( 'btn', `btn-${variant}`, // btn-primary / btn-secondary `btn-${size}`, // btn-sm / btn-lg { 'btn-disabled': disabled, // 条件为 true 时添加 'btn-active': !disabled } )} > {children} </button> ) }

// ❌ 糟糕：手动拼接字符串 function Button({ variant, size, disabled }) { let className = 'btn btn-' + variant + ' btn-' + size if (disabled) { className += ' btn-disabled' } else { className += ' btn-active' } return <button className={className}>Click</button> }

三、万能兜底：条件渲染决策表

万能决策流程：

条件有几个分支？ → 1 个（满足才显示）→ 用 && → 2 个 → 用三元表达式 → 3 个及以上 → 用对象映射 → 逻辑太复杂 → 抽子组件

// 万能模板 function View({ status, data, error }) { // 复杂逻辑先抽出来 if (status === 'loading') return <Spinner /> if (status === 'error') return <ErrorMessage error={error} /> if (!data || data.length === 0) return <EmptyState /> // 简单条件用 && return ( <div> {data.length > 10 && <Pagination total={data.length} />} <DataList data={data} /> </div> ) }

四、预防 checklist（不再踩坑）

• &&左侧是数字时，用> 0或!!避免0被渲染
• 不要在 JSX 中写if-else，用三元或 IIFE
• 嵌套三元超过 2 层 → 换对象映射或抽子组件
• IIFE 只在万不得已时用，优先抽子组件
• 组件内提前return处理 loading/error 状态，减少嵌套
• 条件 className 用clsx/classnames，不要手动拼字符串
• 频繁切换的组件用 CSSdisplay而非卸载/挂载，保留状态
• switch语句放在组件外部或 IIFE 中，不要直接写在 JSX

五、一句话总结

一个分支用 &&，两个分支用三元，三个以上用对象映射，逻辑复杂就抽子组件——条件渲染的本质就是把 if-else 翻译成 JSX 能接受的形式。

最后问候亲爱的朋友们，并邀请你们阅读我的全新著作

📚 《React进阶之路》