作为一名 React 开发者，我们都经历过这样的时刻：盯着 JSX 代码，纠结于条件渲染，内心涌起一丝挫败感。让我们先看看一些常见的代码片段：
{isVisible && ( <> <Header /> <Content /> </> )}
{ isLoggedIn ? <UserDashboard /> : <LoginForm /> }
没错，这些代码确实能跑起来，但代价是什么呢？🤔
- 过多的括号和嵌套让代码难以阅读。
- 嵌套的条件判断？那简直是混乱的开始。
- 这样的代码既不优雅，也不直观。
虽然这不是什么致命问题，但它就像鞋里的一粒小石子——虽然小，但时间久了真的会让人抓狂。😫
灵感来源：Solid.js 的优雅解决方案 💡
这时，Solid.js 进入了我的视野。这个框架以其创新的设计思路吸引了众多开发者的目光。其中一个让我眼前一亮的特性，就是它处理条件渲染的优雅方式。
解决方案：引入 Show 组件 🎉
受到 Solid.js 的启发，我决定创建一个 Show 组件，来简化我们的条件渲染逻辑：
interface ShowProps<T> {when: T | undefined | null | false; fallback?: React.ReactNode; children: React.ReactNode | ((item: T) => React.ReactNode);
} function Show({ when, fallback = null, children }) {return when ? children : fallback;
}
实战对比：改造前后 🔄
1. 基础条件渲染
改造前：
{isLoading && <Spinner />}
改造后：
<Show when={isLoading}><Spinner />
</Show>
2. 条件分支渲染
改造前：
{isAdmin ? <AdminPanel /> : <UserPanel /> }
改造后：
<Show when={isAdmin} fallback={<UserPanel />}
> <AdminPanel />
</Show>
3. 复杂条件渲染
改造前：
{isCommentsEnabled && ( <> <CommentsHeader /> {comments.map(comment => ( <CommentItem key={comment.id} {...comment} /> ))} {isLoggedIn && <CommentForm />} </> )}
改造后：
<Show when={isCommentsEnabled}> <CommentsHeader /> {comments.map(comment => ( <CommentItem key={comment.id} {...comment} /> ))} <Show when={isLoggedIn}> <CommentForm /> </Show>
</Show>
4. 带数据处理的条件渲染
改造前：
{user && ( <div> Welcome, {user.name}! {user.isAdmin && <AdminBadge />} </div> )}
改造后：
<Show when={user}> {(userData) => ( <div> Welcome, {userData.name}! <Show when={userData.isAdmin}> <AdminBadge /> </Show> </div> )}
</Show>
更进一步：支持异步数据 🚀
既然已经做到这一步了，为什么不更进一步呢？让我们为异步数据添加支持：
const AsyncShow = ({ when, fallback, children }) => { const [isLoading, setIsLoading] = useState(true); const [data, setData] = useState(null); useEffect(() => { Promise.resolve(when).then(result => { setData(result); setIsLoading(false); }); }, [when]); if (isLoading) return fallback; return data ? children : null;
}; // 使用示例
<AsyncShow when={fetchUserData()} fallback={<Loading />} > {user => <UserProfile data={user} />}
</AsyncShow>
总结：小改动，大影响 🎬
这个简单的组件不仅让我们的代码更干净、更易读，还提升了开发效率。有时候，最小的改进也能带来最大的收益！🌟
记住，在 React 开发的大舞台上，往往是像 Show 这样的“配角”抢走了风头。所以，让这场表演继续吧，愿你的条件渲染永远优雅！