快捷導(dǎo)航

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

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

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

背景介紹

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

{
  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> : ''
}

通過(guò)一個(gè)變量或者一個(gè)表達(dá)式，控制元素組件的顯示和隱藏。從功能上看沒(méi)什么問(wèn)題，但從可讀性上，卻是可斟酌的。

過(guò)多的括號(hào)或者嵌套的括號(hào)，難以閱讀
js表達(dá)式和元素混合，不直觀

這其實(shí)都是因?yàn)橐褂胘s，增加了括號(hào)引起的，那有沒(méi)有辦法不適用括號(hào)呢？結(jié)合其他框架來(lái)看，方案有兩種，一種是像Vue一樣使用指令，一種是像Solid.js一樣使用組件。

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

Solid.js的Show組件

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

Show 控制流用于有條件地渲染視圖的一部分：當(dāng) when 為 true 時(shí)渲染 children，否則渲染 fallback。它類似于三元運(yùn)算符（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 的一種方式。例如，每當(dāng)替換 user model 時(shí)，都會(huì)重新執(zhí)行該方法。

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

也可以將多個(gè) Show 嵌套使用，用于處理多層級(jí)的條件判斷。

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

React的實(shí)現(xiàn)

那我們也來(lái)實(shí)現(xiàn)一個(gè)類似效果的組件。

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

實(shí)現(xiàn)真的是很簡(jiǎn)單，那么我們來(lái)看看前面的例子改寫(xiě)后的形式

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

結(jié)論

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

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

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

您可能感興趣的文章: