A React deklaratív megjelenítési megközelítése lehetővé teszi a gazdag összetevők gyors megírását az elrendezés, a bemutatás és a logika ötvözésével. Ez azonban bonyolultabbá teheti a felhasználói felület szakaszainak feltételes renderelését. Íme néhány módszer, amellyel az alkatrészeket igény szerint megjelenítheti.
A probléma megértése
A hagyományos sablonrendszerek megkönnyítik a feltételes megjelenítés megvalósítását. Így teheti ezt meg Kormány, egy JavaScript sablonmotor:
<div class="profile">
{{#if user}}
<p>You are logged in!</p>
{{else}}
<a href="/login">Login</a>
</div>
{{/if}}
Amikor a React-ben dolgozik, általában ír JSX. Bár JSX kinéz a HTML-hez hasonlóan a React összeépítési folyamata átülteti a szokásos JavaScript-be. Végül a sorozat React.createElement() hívások.
Ez azt jelenti, hogy a JSX-en belül nem használhat változatlan JavaScript-feltételeket. Ilyesmi próbálkozás fordítási hibát okoz:
const MyComponent = props => { return ( <div> if (props.user) { <p>You are logged in!</p> } else <a href="/login">Login</a> </div> ); };
Ha a JSX-ben szereplő állítások kicsit jobban átgondolják. Számos megközelítés közül választhat. A választott opció a feltétel összetettségétől függ, függetlenül attól, hogy van-e else ágat, és hogy ez rontja-e a kód olvashatóságát.
Emelés a JSX-ből
A fenti kód javításának legalapvetőbb módja a if ki a return nyilatkozat:
const MyComponent = props => { if (props.user) { return <p>You are logged in!</p>; } else { return <a href="/login">Login</a>; } };
A feltétel eltávolításra került a JSX-ből. Két független JSX csomópontot használnak helyette, az egyiket a visszatérésre egy if utasítás a függvény testében. Ez a megközelítés egyértelműen érthető és teljesen elkülöníti egymástól a két ágat.
Feltételes kifejezések használata
A fenti megoldás általában csak a legegyszerűbb összetevőkben működik. Hajlamos a kód megismétlésére, például a legfelső szintre <div> jelen van a példa mindkét JSX csomópontjában.
Legtöbbször valami elegánsabbra lesz szüksége. A JSX támogatja a göndör zárójelbe csomagolt JavaScript kifejezéseket ({}). Használhatja logikai összehasonlításokat és a hármas operátor az inline feltételes megjelenítés elérése érdekében.
const MyComponent = props => { return ( <div> {props.user ? <p>You are logged in!</p> : <a href="/login">Login</a>} </div> ); };
Ez a példa rendeltetésszerűen működik, a kód duplikálása nélkül. A felhasználó hitelesítése után megjelenik a bejelentkezett szöveg. Amikor a felhasználót kijelentkeztük, a kifejezés a következőre értékel false hogy megjelenjen a bejelentkezési link.
Az inline kifejezések a leggyakrabban használt JSX feltételes renderelési technika. Kognitívan igényesek lehetnek, különösen, ha az igaz és hamis visszatérési értékek maguk is kifejezések. Ha egy kifejezés nehézkessé válik, akkor több vonalon átívelheti. Ez javíthatja az olvashatóságot, és hozzájárulhat ahhoz, hogy a fájl a linter által előírt sorhosszon belül maradjon.
Forgatókönyvek, ahol nincs „egyeb”
Adjuk át a fenti példát a „Te vagy bejelentkezve” szöveg eltávolításával. Termékmenedzserünk úgy döntött, hogy az alkalmazás ezen szakaszában nem szükséges. A konténer <div> a felhasználó bejelentkezésekor most üresnek kell lennie.
A React segítségével visszatérhet null jelezni, hogy nincs mit megjeleníteni. Ennek megfelelően állítsa be az összetevő feltételes kifejezését.
const MyComponent = props => { return ( <div> {props.user ? null : <a href="/login">Login</a>} </div> ); };
A React is támogatja false azonos jelentéssel null. Ez azt jelenti, hogy a fentieket lerövidítheti a JavaScript-ek használatával && (és) operátor logikai összehasonlítást végez.
const MyComponent = props => { return ( <div> {!props.user && <a href="/login">Login</a>} </div> ); };
A kifejezés bal oldala a következőre fog értékelni false amikor a felhasználó be van jelentkezve. Mivel a két oldal összekapcsolódik egy and, az általános kifejezés azt is értékeli false. Következésképpen a felhasználó bejelentkezésekor semmi sem jelenik meg.
Kijelentkezéskor a bal oldal értéket ad a következőre: true. A JSX átültetésekor a jobb oldal mindig igaz lesz, amikor JavaScript objektummá válik. Az értékelés ezen formája a kifejezés jobb oldalát adja vissza, így a bejelentkezési link renderelésre kerül.
A JavaScript értékelések „rövidzárlatosak”. Ez azt jelenti, hogy a JSX a jobb oldalon nem lesz feleslegesen felépítve, ha a bal oldali kifejezés false.
Feltételes prop értékek
A kellékek értékét feltételessé teheti a fentiekkel megegyező stílusú beágyazott kifejezések használatával. Használjon feltételes vagy háromszintű értékelést a szolgáltatandó érték meghatározásához. A (z) érték visszaadása undefined egyenértékű a támasz megadásával.
const MyComponent = props => { return ( <div> <a href={(props.user.loggedIn === true) ? "/dashboard" : "/home"}> Home </a> </div> ); };
Ebben a példában a „Home” hivatkozás célállomása dinamikusan módosul attól függően, hogy a felhasználó be van-e jelentkezve. Ne feledje, hogy a JSX-ben lévő összetevők kellékeit egy egyszerű JavaScript-objektummá transzlálják, ezért működik ez a technika. Ön valóban a következőket írja:
React.createElement("a", { href: (props.user.loggedIn === true) ? "/dashboard" : "/home" });
A JSX csupán egy JavaScript szintaxis kiterjesztés, amely lehetővé teszi a React összetevők HTML-re emlékeztető formában történő deklarálását.
Logikai komponenseket használó feltételrendszerek
A feltételes megjelenítés elérésének másik módja az úgynevezett „logikai” komponensek beépítése a projektbe. Ezek olyan egyszerű elemek, amelyek csak akkor nyújtják gyermekeiket, ha egy feltétel teljesül.
const IfComponent = props => { if (props.condition) return props.children; else return null; } const MyComponent = props => ( <IfComponent condition={props.user.isLoggedIn}> <a href="/logout">Logout</a> </IfComponent> );
Ez a minta készítheti el a kódot a render() funkció intuitívabb. Van azonban egy nagy probléma – a a elem mindig megjelenik, még akkor is, ha a if feltétel nem teljesül. Ezt alkalmazkodással oldhatná meg IfComponent úgy, hogy a megjelenítés helyett függvényt hívjon meg children közvetlenül.
const IfComponent = props => { if (props.condition) return props.renderChildren(); else return null; } const renderContent = () => <a href="/logout">Logout</a>; const MyComponent = props => ( <IfComponent condition={props.user.isLoggedIn} renderContent={renderContent} /> );
Most a a elem csak akkor konstruálódik, ha a feltétel valóban teljesül. Ez csökkenti a felesleges újrarendeléseket, ami javítja a teljesítményt összetett összetevők használatakor.
Ennek a mintának egy variációja a magasabb rendű komponens (HOC). Ez lehetővé teszi egy feltételes funkcionalitású összetevő csomagolását.
const ifHoc = (condition, component) => { return props => { if (condition()) return component(props); else return null; }; } const LogoutLink = () => <a href="/logout">Logout</a>; const LogoutLinkOnlyWhenLoggedIn = ifHoc(props => props.loggedIn, LoginLink); - const ComponentUsingLoginLink = props => ( <LogoutLinkOnlyWhenLoggedIn loggedIn={props.user.isLoggedIn} /> );
Ezt a megközelítést először kissé nehezebb megérteni. A legjobb, ha a megjelenítendő összetevőt teljesen el akarja tartani a feltételes logikától. Lehetővé teszi a komplex logika újrafelhasználását is, mivel bármelyik komponens beburkolható ifHoc(). A HOC beburkolja az eredeti komponenst, és csak akkor adja vissza, amikor az átadott feltételes funkció visszatér true.
Teljesítménybeli problémák
Néhány általános teljesítményi szempont érvényes a React összes feltételes megjelenítésére. A legfontosabb az újrarendelés korlátozása, amennyire csak lehetséges. Próbáld meg nem helyettesíteni a felhasználói felület hatalmas darabjait a prezentációs összetevőkön belül. A túl sok újrarendezés gyorsan „lassúnak érzi” érzetét keltheti.
Hasonlóképpen, vegye figyelembe, hogy a feltételes kifejezéseket rendszerint kiértékelik, amikor az összetevő megjelenik. Ha maguk a feltételek bonyolultak (például objektumok tömbjének feltérképezése új objektumokba), ez is lassulást eredményezhet, különösen az alacsony kategóriájú hardvereken.
Következtetés
A React megkívánja, hogy a feltételes megjelenítést a hagyományos sablonrendszerekkel kissé eltérően közelítse meg. Ennek oka, hogy csak a JSX kinéz mint a HTML. Visszatérve JavaScript objektumokra, amelyeket aztán a React funcion hívásokhoz használnak.
Ennek ellenére különféle lehetőségek állnak rendelkezésre, amikor feltételesen meg kell renderelnie egy összetevőt. A legegyszerűbb lehetőség általában feltételes kifejezések írása a JSX-be, akár a használatával && vagy a háromszintű szintaxist. Visszaeshet egy igazi if a gyökere render() metódust, vagy fogadjon el egy magasabb rendű komponenst, ha a JSX kifejezések megnehezítik a renderelés folyamatát.
