از طریق منوی جستجو مطلب مورد نظر خود در وبلاگ را به سرعت پیدا کنید
سرفصلهای مطلب
در React یا هر فریم ورک فرانت اند، اغلب باید یک یا چند کامپوننت یا مقداری HTML را به صورت مشروط رندر کنید. راه های مختلفی برای رسیدن به این هدف وجود دارد که در اینجا به تعدادی از آنها خواهیم پرداخت.
اپراتور سه تایی
اگر می خواهید دستور شرطی را در کد JSX مدیریت کنید، استفاده از عملگر سه تایی ممکن است بهترین گزینه باشد. این کار با بررسی شرایط و سپس “برگرداندن” مولفه مناسب بسته به آن انجام می شود روی نتیجه. نمونه ای از آن را می توانید در اینجا ببینید:
import React from 'react';
export default function Greeting({user}) {
return (
<div>
{
user === null ? <h1>Hi there!</h1> : (
<>
<h1>Hello {user.name}</h1>
<h2>You last logged in {user.last_login_at}</h2>
</>
)
}
</div>
);
}
در این مثال ما به صورت مشروط احوالپرسی مفصل‌تری ارائه می‌کنیم user شی ارائه شده است. توجه داشته باشید که با عملگر سه تایی می‌توانیم یک عنصر واحد را بدون نحو اضافی برگردانیم، در حالی که برای برگرداندن چندین مؤلفه هم به پرانتز و هم تگ قطعه نیاز است.
این رویکرد معمولاً زمانی استفاده می شود که دو مؤلفه مختلف بازگردانده شده خیلی طولانی نباشند. اگر یکی از بلوک‌های کدی که بازگردانده می‌شود، خطوط زیادی داشت، ممکن است خواندن و دنبال کردن آن دشوار شود.
اگر دیگری
این مورد برای زمانی مفید است که محاسبه درون خطی شرطی با JSX دیگر دشوار است، یا اگر کد JSX حاصل بسیار طولانی است. به جای محاسبه مستقیم شرطی در JSX، از قبل در کد JS معمولی انجام می شود:
import React from 'react';
export default function Greeting({user}) {
let helloComponent;
if (user === null) {
helloComponent = <h1>Hi there!</h1>;
} else {
helloComponent = (
<>
<h1>Hello {user.name}</h1>
<h2>You last logged in {user.last_login_at}</h2>
</>
);
}
return (
<div>
{ helloComponent }
</div>
);
}
این مزیت را نیز دارد که JSX برگشتی را بسیار تمیزتر و به راحتی دنبال می کند.
منطقی و (&&)
اپراتور سه تایی و عبارات if/else عالی هستند اگر بخواهید یک جزء را رندر کنید یا یکی دیگر. اما اگر نیاز دارید که فقط یک جزء را به صورت مشروط رندر کنید، می توانید از عملگر AND منطقی (&&) برای این کار استفاده کنید.
import React from 'react';
export default function Greeting({user}) {
return (
<div>
{
user && <h1>Hi there {user.name}!</h1>
}
</div>
);
}
این به همان نتیجه عملگر سه تایی می رسد و از یک مورد غیر ضروری “دیگر” که تگ های خالی را برمی گرداند اجتناب می کند.
مورد سوئیچ
برای مواردی که شما نیاز به بررسی شرایط مختلف دارید، الف switch بیانیه ممکن است مناسب تر باشد. قرار دادن این کد با کد JSX دشوارتر است، بنابراین اغلب در JS ساده بالای کد انجام می شود return بیانیه.
import React from 'react';
export default function Greeting({user}) {
let helloComponent;
switch (user.role) {
case 'admin':
helloComponent = <div>Click <a href="#">here</a> for the admin dashboard.</div>
break;
case 'user':
helloComponent = (
<>
<h1>Hello {user.name}</h1>
<div>Click <a href="#">here</a> for account settings.</div>
</>
);
break;
default:
helloComponent = <></>
}
return (
<div>
{ helloComponent }
</div>
);
}
همانطور که می بینید، در حالی که به راحتی امکان رسیدگی به بسیاری از موارد مختلف را فراهم می کند، همچنین بسیار پرمخاطب تر از عملگر سه تایی است.
منتشر شده در 1403-01-07 09:15:03
