خب برای شروع بپردازیم به یه موضوعی که نسبتا سادس! تا کم‌کم بیاد دستم که چطوری باید این مجموعه رو نوشت. مشغول مطالعه بودم که ایده اولین نوشته تکنیکال این سری به سرم زد. استفاده از شرط‌ها در jsx. یه به قولی conditional rendering. یعنی وقتی که میخوایم بر اساس یک یا چند شرط تصمیم بگیریم چه چیزی رو به کاربر نشون بدیم.
ساده ترین نوع از این کاری که میخوایم بکنیم به این شکله:
<div> { condition ? <p>Condition is true</p> : <p>Condition is false</p> } </div>
که باز ساده‌تر و خوش دست‌ترش (در اکثر مواقع) میشه این:
<div> { condition && <p>Condition is true</p> } </div>
حالا فرض کنید شرایطی پیش اومده که ممکنه بیشتر از یک خروجی برای این بخش داشته باشیم. یعنی مجبور باشیم چند تا شرط رو بررسی کنیم و چندین حالت مختلف داشته باشیم. میتونیم اینجوری بنویسیم.
<div> {condition && condition2 && !condition3 ? condition4 ? <p>Blah</p> : condition5 ? <p>Meh</p> : <p>Herp</p> : <p>Derp</p> } </div>
ولی کد بالا خوانا نیست. اونی که بعدا بخواد بیاد و این بخش از کد رو تغییر بده واقعا کار سختی رو پیش رو داره و مجبوره زمان زیادی رو صرف تغییر درک کردنش بکنه. پس باید یه راه حل بهتر داشته باشیم. میتونیم از if و else if استفاده کنیم. ولی نمیتونیم از if مستقیما داخل تمپلیتمون استفاده کنیم مگر اینکه داخل فانکشن بزاریمش و اونو صدا بزنیم. میتونیم کل این فرآیند رو با یک immediately invoked function expression حل کنیم. چجوری؟ اینجوری:
<div> { (() => { if (condition && condition2 && !condition3) { if (condition4) { return <p>Blah</p> } else if (condition5) { return <p>Meh</p> } else { return <p>Herp</p> } } else { return <p>Derp</p> } })() } </div>
برای شروع بد نبود نه؟ دوست دارم نظرتون رو بدونم برای ادامه این مجموعه.
تا یادم نرفته بگم که ما این مشکلو توی انگولار به این شکل هندل میکنیم:
