از طریق منوی جستجو مطلب مورد نظر خود در وبلاگ را به سرعت پیدا کنید
سرفصلهای مطلب
معرفی
React.js یک کتابخانه محبوب جاوا اسکریپت برای ساخت رابط های کاربری است، به ویژه تکpage برنامه های کاربردی. یکی از کارهای رایج هنگام کار با React.js، دستکاری سبک های متن، مانند پررنگ کردن متن خاص است.
این بایت به شما نشان می دهد که چگونه با استفاده از کامپوننت span و روش اعمال مشروط یک استایل پررنگ را در React.js در واقع متن پررنگ کنید.
برای پررنگ کردن متن در React.js، می‌توانیم از CSS یا HTML استفاده کنیم <strong> برچسب زدن برای بیشتر مثال‌های ما در این بایت، روش انجام آن را با کلاس CSS نشان خواهیم داد. .bold. این برای مواردی که به صورت مشروط استایل پررنگ را اضافه می‌کنید بسیار آسان‌تر است، به همین دلیل است که ما آن را به این شکل نشان می‌دهیم.
پررنگ کردن متن در React.js
در فایل CSS خود می توانید یک کلاس با font-weight ویژگی تنظیم شده به bold. در اینجا یک مثال است:
.bold {
font-weight: bold;
}
سپس، می‌توانید از این کلاس در مؤلفه‌های React.js خود برای اضافه کردن یک استایل پررنگ به متن استفاده کنید، که در این مورد در یک <p> برچسب:
function MyComponent() {
return <p className="bold">This is some bold text.</p>;
}
پس از اجرای این کد، خروجی نهایی HTML به صورت زیر خواهد بود:
<p class="bold">This is some bold text.</p>
ایجاد کامپوننت Span
روش دیگر برای پررنگ کردن متن در React.js ایجاد یک است <span> جزء. این کامپوننت متنی را که می‌خواهید پررنگ کنید بپیچید. در اینجا روش انجام این کار آمده است:
function BoldSpan({ children }) {
return <span className="bold">{children}</span>;
}
سپس می توانید از این استفاده کنید BoldSpan جزء به متن پررنگ:
function MyComponent() {
return (
<p>
This is some <BoldSpan>bold</BoldSpan> text.
</p>
);
}
خروجی کد بالا به صورت زیر خواهد بود:
<p>This is some <span class="bold">bold</span> text.</p>
این روش زمانی بهتر است که نمی‌خواهید کل پاراگراف را پررنگ کنید، اما در عوض فقط چند کلمه یا کمتر.
استفاده مشروط از سبک پررنگ
در برخی موارد، ممکن است بخواهید سبک پررنگ را به صورت مشروط اعمال کنید. در React.js، می توانید با یک عملگر سه تایی به این مهم دست یابید. در اینجا یک مثال است:
function MyComponent({ shouldBolden }) {
return (
<p className={shouldBolden ? "bold" : ""}>This is some text.</p>
);
}
در کد بالا، shouldBolden prop تعیین می کند که متن پررنگ باشد یا خیر. اگر shouldBolden است true، className خواهد بود "bold"و متن پررنگ خواهد بود. اگر shouldBolden است false، className در این صورت فقط یک رشته خالی خواهد بود و بنابراین متن پررنگ نخواهد بود.
توجه داشته باشید: عملگر سه تایی تنها یکی از راه‌های اعمال مشروط استایل‌ها در React.js است. شما همچنین می توانید استفاده کنید if بیانیه، switch عبارات، یا هر منطق شرطی دیگری که متناسب با نیاز شما باشد. در این حالت اپراتور سه تایی فشرده تر و تمیزتر از روش های دیگر است.
استفاده از تگ قوی HTML برای متن پررنگ
همانطور که قبلا ذکر شد، ما همچنین می توانیم از <strong> برچسب به متن پررنگ در حالی که <strong> لزوماً به معنای “پررنگ” نیست، اکثر مرورگرها آن را به این شکل ارائه می کنند. این یک عنصر درون خطی است که می تواند هر مقدار متن را احاطه کند تا استایل پررنگ را اضافه کند.
با استفاده از یک مثال از قبل، اما با <strong>، به این صورت خواهد بود:
function MyComponent() {
return (
<p>
This is some <strong>bold</strong> text.
</p>
);
}
توجه داشته باشید: به خاطر داشته باشید که وجود دارد است تفاوت در استفاده font-weight: bold، <strong>، و <b>. مطابق با MDN:
“آیا باید استفاده کنم
<b>یا<strong>? آیا هر دو یک کار را انجام نمی دهند؟”نه دقیقا. این
<strong>عنصر برای محتوایی است که اهمیت بیشتری دارد، در حالی که<b>عنصر برای جلب توجه به متن استفاده می شود بدون اینکه نشان دهد آن مهمتر است.
نتیجه
در این راهنما، ما یاد گرفتیم که چگونه متن خاصی را در React.js پررنگ کنیم. ما چند راه مختلف برای رسیدن به این هدف نشان دادیم، مانند استفاده از .bold کلاس CSS با <p> برچسب ها، با <span> برچسب ها و همچنین با استفاده از <strong> بدون CSS تگ کنید. ما همچنین روش اعمال مشروط یک سبک برجسته را نشان دادیم روی معیارهای خاص
این رویکرد به ما یک راه انعطاف پذیر برای کنترل ظاهر متن خود در React می دهد. با این دانش، می‌توانید شروع به کاوش در سبک‌های پیچیده‌تر و سناریوهای رندر شرطی در برنامه‌های React خود کنید.
منتشر شده در 1403-01-01 09:33:04
