React組件化條件渲染的實現(xiàn)

更新時間：2024年12月02日 11:08:10 作者：葉知秋水

本文主要介紹了React組件化條件渲染的實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧

背景介紹

React通常搭配jsx使用，jsx把js和視圖組合在一起，巧妙地把視圖轉換成了js模塊。但經(jīng)常寫react的應該會看到過很多這樣子的代碼：

{
  tabList.length > 2 ?
    <TabBar
      tabList={tabList}
      tabIndex={tabIndex}
      hasLoginBar={showLoginStatus}
      tabChange={handleTabChange}
      type={'sticky'}
      colorTheme={colorTheme}
      fontType={'fzlantingyuan'}
    /> : ''
}

{
  taskList.length || isPreview ?
    <p className={styles.rulesText} onClick={() => clickRules()}>規(guī)則</p> : ''
}

通過一個變量或者一個表達式，控制元素組件的顯示和隱藏。從功能上看沒什么問題，但從可讀性上，卻是可斟酌的。

過多的括號或者嵌套的括號，難以閱讀
js表達式和元素混合，不直觀

這其實都是因為要使用js，增加了括號引起的，那有沒有辦法不適用括號呢？結合其他框架來看，方案有兩種，一種是像Vue一樣使用指令，一種是像Solid.js一樣使用組件。

由于React 本身并沒有內(nèi)置類似于 Vue.js 自定義指令（v-directive）的功能，所以最理想的還是基于組件去實現(xiàn)。

Solid.js的Show組件

那我們先來看看Solid.js的Show組件。在Solid.js里Show屬于控制流組件，其官方介紹如下：

Show 控制流用于有條件地渲染視圖的一部分：當 when 為 true 時渲染 children，否則渲染 fallback。它類似于三元運算符（when ? children : fallback），但非常適合模板化 JSX。

import { Show } from "solid-js";

function Show<T>(props: {
  when: T | undefined | null | false;
  keyed: boolean;
  fallback?: JSX.Element;
  children: JSX.Element | ((item: T) => JSX.Element);
}): () => JSX.Element;

使用方式如下：

<Show when={state.count > 0} fallback={<div>Loading...</div>}>
  <div>My Content</div>
</Show>

Show 也可以用作將塊鍵控到特定 data model 的一種方式。例如，每當替換 user model 時，都會重新執(zhí)行該方法。

<Show when={state.user} fallback={<div>Loading...</div>} keyed>
  {(user) => <div>{user.firstName}</div>}
</Show>

也可以將多個 Show 嵌套使用，用于處理多層級的條件判斷。

<Show when={user}>
  <Show when={user.isAdmin} fallback={<p>Welcome, regular user!</p>}>
    <p>Welcome, admin user!</p>
  </Show>
</Show>

React的實現(xiàn)

那我們也來實現(xiàn)一個類似效果的組件。

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;
}

實現(xiàn)真的是很簡單，那么我們來看看前面的例子改寫后的形式

<Show when="tabList.length > 2" >
  <TabBar
    tabList={tabList}
    tabIndex={tabIndex}
    hasLoginBar={showLoginStatus}
    tabChange={handleTabChange}
    type={'sticky'}
    colorTheme={colorTheme}
    fontType={'fzlantingyuan'}
  />
</Show>

<Show when="taskList.length || isPreview" >
    <p className={styles.rulesText} onClick={() => clickRules()}>規(guī)則</p>
</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;
};

// Usage
<AsyncShow 
  when={fetchUserData()} 
  fallback={<Loading />}
>
  {user => <UserProfile data={user} />}
</AsyncShow>

結論

在 React 中，通過結合 JSX 和組件化設計，可以實現(xiàn)更加優(yōu)雅的條件渲染。本文介紹了 Solid.js 的 Show 組件，并借鑒其理念，在 React 中實現(xiàn)了類似的 Show 組件，用于替代傳統(tǒng)的三元表達式或邏輯運算符進行條件渲染。這樣的實現(xiàn)不僅提升了代碼的可讀性，還使得 JSX 模板更加直觀和簡潔。

在日常開發(fā)中，倡導大家多學習其他框架的優(yōu)勢，不僅能開拓思維，還能優(yōu)化現(xiàn)有技術棧的使用方式。多學習并不意味著拋棄當前的技術棧，而是通過吸收優(yōu)點優(yōu)化現(xiàn)有代碼，甚至推動團隊開發(fā)的規(guī)范升級。學習其他框架的思維方式可以幫助我們跳出慣性，提高對復雜場景的解決能力。

到此這篇關于React組件化條件渲染的實現(xiàn)的文章就介紹到這了,更多相關React組件化條件渲染內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: