Začátky webu byly, pokud jde o praktiky kódování, jako na divokém západě – stačí, aby to fungovalo. Poté jsme získali osvícení k lepším postupům, oddělením HTML od CSS a JavaScriptu. Pak přišel React a JSX, kde kombinujeme JavaScript, HTML a dokonce CSS se stylovými komponentami – jaký elegantní nepořádek jsme udělali!
Jednou za čas jsem součástí toho nepořádku, když vidím 0 zobrazení ve výstupu mého kódu JSX, a bylo mi připomenuto proč:nesprávné zacházení s psaním proměnných v kombinaci s použitím && . Nech mě to vysvětlit!
Jeden z oblíbených vzorů v JSX je:
<div>Some header</div>
{someValue && <div>Some header</div>}
Vzor dává smysl, ale podívejte se na rozdíl ve výstupech mezi typy řetězců a čísel:
"0" && "Thing" > "Thing" 0 && "Thing" > 0
Všimněte si, že hodnota řetězce 0 umožňuje vrátit druhou hodnotu, ale číslo napsané 0 jednoduše vrátí 0 . Nejlepším postupem je vždy přetypovat hodnotu na Boolean ve vašem JSX:
{Boolean(value) && ....}
Strojopis a dokonce PropTypes může pomoci zachytit tyto problémy, ale i ostřílení veteráni někdy narazí na tyto bolestivé body.