styled-component

جادوی styled-component ها

اگر تا به حال با styled-component ها روبرو نشده‌اید، قطعه کد زیر را به عنوان یک کامپوننت (مولفه‌ی) استایل ری‌اکت مشاهده کنید:

این متغیر Button تبدیل به یک کامپوننت ری‌اکتی شده که می‌توان از این پس همانند دیگر کامپوننت‌های ری‌اکت، این دکمه را نیز رندر کرد:

خب حال به نظر شما این فرآیند چگونه عملی شده است؟ به نظر شما از چه ابزاری برای محیا کردن این بستر استفاده شده است؟

Tagged Template Literals

ممکن است بخش styled.button`` کمی برایتان عجیب بوده باشد و با آن آشنایی نداشته باشید. در واقع در این بخش شما در حال استفاده از یکی از قابلیت‌های نسبتا جدید جاوااسکریپت به نام Template Literal ها هستید. این ویژگی جدید جاوااسکریپت با عنوان Tagged Template Literal در ES6 معرفی شده است.

در واقع این بخش کد در حال فراخوانی یک فانکشن است و باید بدانیم که styled.button`` تفاوت چندانی با styled.button() ندارد. تفاوت این دو نوع فراخوانی تنها زمان پاس داده شدن آرگومان‌ها به آن‌ها مشخص خواهد شد.

بیایید برای درک بهتر این نوع فراخوانی، یک مثال ساده بیاوریم:

const logArgs = (...args) => console.log(...args)

ما فانکشنی بسیار ساده تعریف کرده‌ایم که تنها وظیفه‌ی آن لاگ گرفتن از آرگومان‌های پاس داده شده به آن است.

شما می‌توانید قطعه کدهای آورده شده در این مقاله را، همراه با ما، مرحله به مرحله با کپی پیست کردن در کنسول مرورگر کامپیوتر خود و اجرا کردنشان، تست کنید.