نحوه ایجاد اجزای بسته بندی در واکنش با غرفه ها

در این آموزش ، با استفاده از کتابخانه React JavaScript ، اجزای بسته بندی را با غرفه ها ایجاد خواهید کرد. اجزای بسته بندی مؤلفه هایی هستند که اجزای ناشناخته را احاطه کرده و یک ساختار پیش فرض برای نمایش اجزای کودک ارائه می دهند. این الگوی برای ایجاد عناصر رابط کاربری (UI) که به طور مکرر در طول یک طراحی استفاده می شوند ، مانند مدالها ، صفحات الگو و کاشی های اطلاعاتی مفید است.

برای ایجاد مؤلفه های بسته بندی ، ابتدا یاد می گیرید که از بقیه و گسترش اپراتورهای برای جمع آوری غرفه های بلااستفاده برای انتقال به اجزای تو در تو استفاده کنید. سپس یک مؤلفه ایجاد می کنید که از مؤلفه داخلی کودکان برای بسته بندی اجزای تو در تو در JSX استفاده می کند ، گویی که آنها عناصر HTML هستند. سرانجام ، شما برای ایجاد بسته بندی های انعطاف پذیر که می توانند JSX سفارشی را در چندین مکان در یک مؤلفه قرار دهند ، به عنوان غرفه هایی که می توانند JSX سفارشی را تعبیه کنند ، منتقل می کنید.

در طول آموزش ، شما برای نمایش لیستی از داده های حیوانات به صورت کارت ، مؤلفه هایی ایجاد خواهید کرد. هنگام ایجاد اجزای بسته بندی انعطاف پذیر ، می توانید داده ها و مؤلفه های Refactor را تقسیم کنید. در پایان این آموزش ، شما یک برنامه کارگری خواهید داشت که از تکنیک های پیشرفته Prop برای ایجاد مؤلفه های قابل استفاده مجدد استفاده می کنید که با افزایش و تغییر برنامه ، مقیاس و سازگار می شوند.

توجه: مرحله اول یک پروژه خالی را تنظیم می کند که در آن شما تمرین آموزش را ایجاد خواهید کرد. اگر قبلاً یک پروژه کاری دارید و می خواهید مستقیماً به کار با غرفه ها بروید ، با مرحله 2 شروع کنید.

پیش نیازها

شما به یک محیط توسعه در حال اجرا Node. js نیاز خواهید داشت. این آموزش بر روی Node. js نسخه 10. 20. 1 و نسخه NPM 6. 14. 4 مورد آزمایش قرار گرفت. برای نصب این کار در MacOS یا Ubuntu 18. 04 ، مراحل نحوه نصب Node. js را دنبال کنید و یک محیط توسعه محلی را در MacOS یا نصب با استفاده از بخش PPA نحوه نصب Node. js در Ubuntu 18. 04 ایجاد کنید.

در این آموزش ، یک برنامه با برنامه React ایجاد می کنید. می توانید دستورالعمل نصب یک برنامه با برنامه React و اطلاعات کلی را در مورد نحوه عملکرد آن در نحوه تنظیم یک پروژه React با ایجاد برنامه React پیدا کنید.

شما از مؤلفه های React استفاده خواهید کرد ، که می توانید در مورد نحوه ایجاد اجزای سفارشی در آموزش React در مورد ما بیاموزید. همچنین به داشتن درک اساسی از غرفه های React کمک می کند ، که می توانید در مورد نحوه سفارشی کردن اجزای React با غرفه ها در مورد آن بیاموزید.

شما همچنین به دانش اساسی JavaScript نیاز خواهید داشت ، که می توانید در سری JavaScript ، به همراه دانش اساسی HTML و CSS ، در سری JavaScript پیدا کنید. یک منبع خوب برای HTML و CSS شبکه توسعه دهنده Mozilla است.

مرحله 1 - ایجاد یک پروژه خالی

در این مرحله ، با استفاده از برنامه React React یک پروژه جدید ایجاد خواهید کرد. سپس پروژه نمونه و پرونده های مرتبط را که هنگام راه اندازی پروژه نصب شده اند ، حذف می کنید. سرانجام ، شما یک ساختار فایل ساده برای سازماندهی مؤلفه های خود ایجاد خواهید کرد. این یک پایه محکم به شما می دهد تا در مرحله بعدی برنامه Wrapper این آموزش را بسازید.

برای شروع ، یک پروژه جدید بسازید. در خط فرمان خود ، اسکریپت زیر را اجرا کنید تا یک پروژه تازه با استفاده از Create-Reach-App نصب کنید:

پس از اتمام پروژه ، به فهرست تغییر دهید:

در یک برگه یا پنجره ترمینال جدید ، پروژه را با استفاده از اسکریپت Create React App Start شروع کنید. مرورگر در مورد تغییرات ، به صورت خودکار بازگردد ، بنابراین این اسکریپت را در حین کار اجرا کنید:

شما یک سرور محلی در حال اجرا دریافت خواهید کرد. اگر این پروژه در یک پنجره مرورگر باز نشده است ، می توانید آن را با http: // localhost: 3000/باز کنید. اگر این کار را از یک سرور از راه دور اجرا می کنید ، آدرس http: // your_domain: 3000 خواهد بود.

مرورگر شما با یک برنامه React Simple که به عنوان بخشی از برنامه REACT Create شامل می شود بارگیری می شود:

شما در حال ساخت مجموعه ای کاملاً جدید از مؤلفه های سفارشی خواهید بود ، بنابراین باید با پاک کردن برخی از کد های دیگ بخار شروع کنید تا بتوانید یک پروژه خالی داشته باشید.

برای شروع ، src/app. js را در یک ویرایشگر متن باز کنید. این مؤلفه اصلی است که به صفحه تزریق می شود. همه مؤلفه ها از اینجا شروع می شوند. می توانید اطلاعات بیشتری در مورد APP. JS در مورد نحوه تنظیم یک پروژه React با برنامه React REACT پیدا کنید.

SRC/APP. JS را با دستور زیر باز کنید:

پرونده ای مانند این را مشاهده خواهید کرد:

حذف آرم واردات خط از './logo. svg' ؛وادسپس همه چیز را در بیانیه بازگشت جایگزین کنید تا مجموعه ای از برچسب های خالی را برگردانید:<> واداین یک صفحه معتبر به شما می دهد که هیچ چیز را برنگردد. کد نهایی به این شکل خواهد بود:

ویرایشگر متن را ذخیره و خارج کنید.

در آخر ، آرم را حذف کنید. شما از آن در برنامه خود استفاده نخواهید کرد و باید پرونده های بلااستفاده را هنگام کار حذف کنید. این شما را در طولانی مدت از سردرگمی نجات می دهد.

در پنجره ترمینال دستور زیر را تایپ کنید:

اگر به مرورگر خود نگاه کنید ، یک صفحه خالی مشاهده خواهید کرد.

اکنون که نمونه پروژه REACT APP را پاک کرده اید ، یک ساختار فایل ساده ایجاد کنید. این به شما کمک می کند تا اجزای خود را منزوی و مستقل نگه دارید.

دایرکتوری به نام قطعات را در فهرست SRC ایجاد کنید. این همه اجزای سفارشی شما را نگه می دارد.

هر مؤلفه دایرکتوری خاص خود را برای ذخیره فایل کامپوننت به همراه سبک ها ، تصاویر در صورت وجود و آزمایش دارد.

یک دایرکتوری برای برنامه ایجاد کنید:

تمام پرونده های برنامه را به آن فهرست منتقل کنید. برای انتخاب هر پرونده ای که با برنامه شروع می شود ، از Wildcard ، * استفاده کنید. صرف نظر از پسوند پرونده. سپس از دستور MV استفاده کنید تا آنها را در فهرست جدید قرار دهید:

در مرحله بعد ، مسیر واردات نسبی را در index. js به روز کنید ، که مؤلفه اصلی است که کل فرآیند را بوت می کند:

بیانیه واردات باید به پرونده app. js در فهرست برنامه اشاره کند ، بنابراین موارد زیر را تغییر دهید:

ذخیره و خروج از پرونده.

اکنون که پروژه تنظیم شده است ، می توانید اولین مؤلفه خود را ایجاد کنید.

مرحله 2 - جمع آوری پیشنهادات بلااستفاده با. غرفه

در این مرحله ، یک مؤلفه برای نمایش مجموعه ای از داده ها در مورد گروهی از حیوانات ایجاد خواهید کرد. مؤلفه شما برای نمایش برخی اطلاعات به صورت بصری حاوی یک جزء دوم تو در تو خواهد بود. برای اتصال والدین و مؤلفه تو در تو ، از OPERATOR های استراحت و گسترش استفاده می کنید تا از والدین به کودک منتقل شوند بدون اینکه والدین نیاز به آگاهی از نام یا انواع غرفه ها داشته باشند.

در پایان این مرحله ، شما یک مؤلفه والدین خواهید داشت که می تواند بدون نیاز به دانستن اینکه چه پیشنهادی دارند ، به اجزای توخالی ارائه دهند. این امر مؤلفه والدین را انعطاف پذیر می کند و به شما امکان می دهد بدون نیاز به تغییر والدین ، مؤلفه کودک را به روز کنید.

ایجاد یک جزء کارت حیوانات

برای شروع ، مجموعه ای از داده ها را برای حیوانات خود ایجاد کنید. ابتدا یک پرونده حاوی مجموعه داده ها را در فهرست اجزای/برنامه باز کنید:

داده های زیر را اضافه کنید:

این لیست از حیوانات مجموعه ای از اشیاء است که شامل نام حیوانات ، نام علمی ، وزن و رژیم غذایی است.

ذخیره کنید و فایل را ببندید.

بعد ، یک دایرکتوری برای مؤلفه کارت حیوانات ایجاد کنید:

یک پرونده جدید را در Directo باز کنید:

اکنون یک مؤلفه اضافه کنید که نام ، رژیم و اندازه را به عنوان یک پروانه انتخاب کرده و آن را نمایش دهید:

در اینجا شما در حال تخریب غرفه ها در لیست پارامتر برای عملکرد کارت حیوانات و سپس نمایش داده ها در یک DIV هستید. داده های رژیم غذایی با استفاده از روش JOIN () به عنوان یک رشته واحد ذکر شده است. هر قطعه از داده ها شامل یک proptype مربوطه برای اطمینان از صحیح بودن نوع داده است.

ذخیره کنید و فایل را ببندید.

اکنون که مؤلفه و داده های خود را دارید ، باید آنها را با هم ترکیب کنید. برای انجام این کار ، مؤلفه و داده ها را به مؤلفه اصلی پروژه خود وارد کنید: App. js.

ابتدا مؤلفه را باز کنید:

از آنجا می توانید داده ها را حلقه کرده و یک کارت حیوانات جدید را با غرفه های مربوطه برگردانید. خطوط برجسته شده را به App. js اضافه کنید:

ذخیره کنید و فایل را ببندید.

همانطور که در پروژه های پیچیده تر کار می کنید ، داده های شما از مکان های متنوع تری مانند API ، LocalStorage یا پرونده های استاتیک تهیه می شود. اما فرآیند استفاده از هر یک از این موارد مشابه خواهد بود: داده ها را به یک متغیر اختصاص داده و بر روی داده ها حلقه کنید. در این حالت ، داده ها از یک پرونده استاتیک است ، بنابراین شما مستقیماً به یک متغیر وارد می شوید.

در این کد ، شما از روش . map () برای تکرار حیوانات و نمایش غرفه ها استفاده می کنید. توجه کنید که لازم نیست از هر قطعه داده استفاده کنید. به عنوان مثال شما صریحاً از ویژگی علمی نامگذاری نمی کنید. شما همچنین در حال اضافه کردن یک کلید اصلی جداگانه هستید که React برای پیگیری داده های نقشه برداری استفاده می کند. سرانجام ، شما کد را با یک Div با یک کلاس بسته بندی بسته بندی می کنید که برای اضافه کردن برخی از یک ظاهر طراحی شده استفاده خواهید کرد.

برای افزودن این یک ظاهر طراحی شده ، App. css را باز کنید:

یک ظاهر طراحی شده دیگ بخار را برداشته و ویژگی های فلکس را به کلاس به نام بسته بندی اضافه کنید:

با این کار از طرح Flexbox برای سازماندهی داده ها استفاده می شود تا خط بماند. بالشتک در پنجره مرورگر فضایی ایجاد می کند و توجیه کننده با محتوای مطبوع فضای اضافی بین عناصر را گسترش می دهد.

ذخیره و خروج از پرونده. هنگامی که این کار را انجام دادید ، مرورگر تازه می شود و برخی از داده ها را مشاهده خواهید کرد.

ایجاد یک جزء جزئیات

اکنون یک مؤلفه ساده دارید که داده ها را نشان می دهد. اما بیایید بگوییم که شما می خواستید با تبدیل متن به یک ایموجی ، داده های رژیم غذایی را کمی استعداد دهید. شما می توانید این کار را با تبدیل داده ها در مؤلفه خود انجام دهید.

React به گونه ای انعطاف پذیر طراحی شده است ، بنابراین وقتی در مورد نحوه تبدیل داده ها فکر می کنید ، چند گزینه مختلف دارید:

• می توانید یک تابع را در داخل مؤلفه ایجاد کنید که متن را به یک ایموجی تبدیل می کند.
• می توانید یک تابع ایجاد کرده و آن را در یک فایل خارج از مؤلفه ذخیره کنید تا بتوانید از منطق در مؤلفه های مختلف استفاده مجدد کنید.
• می توانید یک مؤلفه جداگانه ایجاد کنید که متن را به یک ایموجی تبدیل کند.

هر رویکرد هنگام استفاده در مورد استفاده مناسب خوب است ، و در هنگام ساخت یک برنامه ، خود را بین آنها تغییر خواهید داد. برای جلوگیری از انتزاع و پیچیدگی زودرس ، باید از گزینه اول برای شروع استفاده کنید. اگر خود را می خواهید از منطق استفاده مجدد کنید ، می توانید عملکرد را به طور جداگانه از مؤلفه بیرون بکشید. گزینه سوم بهتر است اگر می خواهید یک قطعه قابل استفاده مجدد داشته باشید که شامل منطق و نشانه گذاری باشد ، یا اینکه می خواهید برای استفاده در برنامه جدا شوید.

در این حالت ، ما یک مؤلفه جدید ایجاد خواهیم کرد ، زیرا می خواهیم بعداً داده های بیشتری اضافه کنیم و ما را با منطق تبدیل ترکیب می کنیم.

مؤلفه جدید AnimalDetails نامیده می شود. برای ساختن آن ، یک دایرکتوری جدید ایجاد کنید:

بعد ، animaldetails. js را در ویرایشگر متن خود باز کنید:

در داخل پرونده ، یک مؤلفه کوچک ایجاد کنید که رژیم را به عنوان یک ایموجی نشان می دهد:

شیء animaldetails. proptypes عملکرد را تنظیم می کند تا یک رژیم غذایی را تهیه کند که مجموعه ای از رشته ها است. سپس در داخل مؤلفه ، کد از رژیم غذایی حلقه می کند و رشته را با استفاده از عبارت سوئیچ به یک ایموجی تبدیل می کند.

ذخیره کنید و فایل را ببندید.

شما همچنین مقداری CS را وارد می کنید ، بنابراین اکنون می توانید اضافه کنیم.

مقداری CSS اضافه کنید تا به عنصر مرز و حاشیه ای بدهید تا جزئیات را از بقیه مؤلفه جدا کنید:

ما از . deals برای مطابقت با این قانون با عناصر با نام کلاس از جزئیات استفاده می کنیم.

ذخیره کنید و فایل را ببندید.

اکنون که یک مؤلفه سفارشی جدید دارید ، می توانید آن را به مؤلفه کارت حیوانات خود اضافه کنید. Open Animalcard. js:

بیانیه رژیم را جایگزین کنید. با افزودن خطوط برجسته: رژیم جدید را با مؤلفه جدید AnimalDetails عبور داده و رژیم غذایی را به عنوان یک طرفه منتقل کنید:

فایل را ذخیره کنید و جزئیات جدید را در مرورگر مشاهده خواهید کرد.

عبور جزئیات از طریق یک مؤلفه با. غرفه

مؤلفه ها با هم خوب کار می کنند ، اما ناکارآمدی جزئی در کارت حیوانات وجود دارد. شما صریحاً رژیم غذایی را از استدلال غرفه ها بیرون می کشید ، اما از داده ها استفاده نمی کنید. درعوض ، شما آن را به مؤلفه منتقل می کنید. در این مورد هیچ چیز ذاتاً اشتباه نیست - در واقع ، اغلب بهتر است از طرف ارتباطات بیش از حد اشتباه کنید. اما در انجام این کار ، حفظ کد خود را دشوارتر می کنید. هر زمان که می خواهید داده های جدیدی را به AnimalDetails منتقل کنید ، باید سه مکان را به روز کنید: برنامه ، جایی که غرفه ها ، AnimalDetails را که از آن استفاده می کند ، و کارت حیوانات را که در آن قرار دارد ، منتقل می کنید.

یک راه بهتر این است که هرگونه غرفه های بلااستفاده را در داخل حیوانات جمع کنید و سپس آنها را مستقیماً به Animaldetails منتقل کنید. این به شما این فرصت را می دهد تا بدون تغییر کارت حیوانات ، تغییراتی در AnimalDetails ایجاد کنید. در واقع ، AnimalCard نیازی به دانستن چیزی در مورد غرفه ها یا روپیه هایی که در AnimalDetails قرار دارند.

برای انجام این کار ، از اپراتور Object Rest استفاده خواهید کرد. این اپراتور مواردی را که در حین تخریب بیرون کشیده نمی شوند جمع می کند و آنها را در یک شی جدید ذخیره می کند.

در اینجا یک مثال ساده وجود دارد:

در این حالت ، نام متغیر "سگ" خواهد بود و غرفه های متغیر خواهند بود.

تا کنون ، شما همه غرفه ها را مانند ویژگی های HTML منتقل کرده اید ، اما می توانید از اشیاء برای ارسال غرفه ها نیز استفاده کنید. برای استفاده از یک شی به عنوان یک غرفه ، باید از اپراتور پخش استفاده کنید. غرفه ها - با بریس های فرفری. این باعث می شود هر جفت ارزش کلید به یک prop تغییر یابد.

در داخل ، رژیم غذایی را از جسم تخریب شده خارج کنید و در عوض بقیه غرفه ها را در متغیری به نام غرفه ها جمع کنید. سپس آن غرفه ها را مستقیماً به AnimalDetails منتقل کنید:

توجه کنید که می توانید رژیم غذایی را حذف کنید زیرا در این مؤلفه از غرفه استفاده نمی کنید.

در این حالت ، شما فقط در حال عبور از یک غرفه به AnimalDetails هستید. در مواردی که چندین غرفه دارید ، سفارش مهم خواهد بود. یک پیشنهاد بعدی غرفه های قبلی را بازنویسی می کند ، بنابراین اگر شما یک غرفه دارید می خواهید اولویت داشته باشید ، مطمئن شوید که آخرین آن است. این امر می تواند باعث سردرگمی شود اگر شیء غرفه های شما دارای خاصیتی باشد که نیز یک مقدار نامگذاری شده است.

ذخیره کنید و فایل را ببندید. مرورگر تازه می شود و همه چیز یکسان به نظر می رسد:

برای دیدن چگونهProps Object انعطاف پذیری را اضافه می کند ، اجازه دهید نام علمی را از طریق مؤلفه کارت حیوانات به AnimalDetails منتقل کنیم.

اول ، App. js را باز کنید:

سپس نام علمی را به عنوان یک برنامه عبور دهید:

ذخیره کنید و فایل را ببندید.

پرش از کارت حیوانات ؛شما نیازی به ایجاد تغییراتی در آنجا نخواهید داشت. سپس AnimalDetails را باز کنید تا بتوانید پیشنهاد جدید را مصرف کنید:

غرفه جدید یک رشته خواهد بود ، که به همراه خطی که از Proptype خبر می دهد ، به لیست جزئیات اضافه خواهید کرد:

ذخیره کنید و فایل را ببندید. هنگامی که این کار را انجام دادید ، مرورگر تازه می شود و جزئیات جدید را بدون هیچ گونه تغییر در مؤلفه کارت حیوانات مشاهده خواهید کرد:

در این مرحله ، شما آموخته اید که چگونه می توانید از والدین انعطاف پذیر استفاده کنید که می تواند غرفه های ناشناخته را ببرد و آنها را با اپراتور پخش به اجزای توخالی منتقل کند. این یک الگوی متداول است که به شما انعطاف پذیری لازم را برای ایجاد مؤلفه هایی با مسئولیت های متمرکز به شما می دهد. در مرحله بعدی ، شما مؤلفه هایی را ایجاد خواهید کرد که می توانند با استفاده از Prop ساخته شده در کودکان ، اجزای ناشناخته را به عنوان یک غرفه در نظر بگیرند.

مرحله 3 - ایجاد اجزای بسته بندی با کودکان

در این مرحله ، شما یک مؤلفه بسته بندی ایجاد خواهید کرد که می تواند یک گروه ناشناخته از مؤلفه ها را به عنوان یک برنامه انتخاب کند. این امکان را به شما می دهد تا مؤلفه هایی مانند HTML استاندارد را لانه کنید و الگویی را برای ایجاد بسته های قابل استفاده مجدد به شما می دهد که به شما امکان می دهد انواع مختلفی را تهیه کنید که به یک طراحی مشترک نیاز دارند اما یک فضای داخلی انعطاف پذیر است.

React یک غرفه داخلی به نام کودکانی را به شما می دهد که اجزای کودک را جمع می کند. استفاده از این امر باعث ایجاد مؤلفه های بسته بندی شده Intuitivie و قابل خواندن می شود.

برای شروع، یک جزء جدید به نام Card بسازید. این یک جزء بسته بندی برای ایجاد یک سبک استاندارد برای هر جزء کارت جدید خواهد بود.

یک دایرکتوری جدید ایجاد کنید:

سپس مؤلفه Card را در ویرایشگر متن خود باز کنید:

با افزودن کد زیر، مؤلفه ای ایجاد کنید که بچه ها و عنوان ها را به عنوان props بگیرد و آنها را در یک div بپیچد:

PropTypes برای کودکان جدید است. پایه کودک می تواند یک عنصر JSX یا آرایه ای از عناصر JSX باشد. عنوان یک رشته است.

ذخیره کنید و فایل را ببندید.

بعد، مقداری استایل اضافه کنید. باز کردن Card. css:

کارت شما دارای یک حاشیه و یک خط در زیر جزئیات خواهد بود.

ذخیره کنید و فایل را ببندید. اکنون که جزء خود را دارید باید از آن استفاده کنید. شما می توانید هر AnimalCard را با مولفه Card در App. js بپیچید، اما از آنجایی که نام AnimalCard نشان می دهد که قبلاً یک کارت است، بهتر است از جزء Card در داخل AnimalCard استفاده کنید.

AnimalCard را باز کنید:

بر خلاف دیگر وسایل، شما به صراحت از کنار کودکان عبور نمی کنید. در عوض، شما JSX را طوری اضافه می کنید که گویی عناصر فرزند HTML هستند. به عبارت دیگر، شما فقط آنها را در داخل عنصر قرار می دهید، مانند زیر:

برخلاف کامپوننت React، در کودکی نیازی به داشتن یک عنصر ریشه واحد ندارید. به همین دلیل است که PropType for Card مشخص کرده است که می تواند آرایه ای از عناصر یا یک عنصر واحد باشد. علاوه بر این که بچه ها را به عنوان اجزای تو در تو قرار می دهید، به کارت عنوان حیوان می دهید.

ذخیره کنید و فایل را ببندید. وقتی این کار را انجام دادید، مرورگر به روزرسانی می شود و مؤلفه کارت به روزرسانی شده را خواهید دید.

اکنون یک قطعه کارت قابل استفاده مجدد دارید که می تواند هر تعداد کودک تودرتو را بگیرد. مزیت اصلی این است که می توانید از کارت با هر جزء دلخواه مجددا استفاده کنید. اگر می خواهید یک کارت Plant بسازید، می توانید این کار را با قرار دادن اطلاعات گیاه با مؤلفه Card انجام دهید. حتی نیازی به ارتباط ندارد: اگر می خواهید از مؤلفه Card در برنامه های کاملاً متفاوتی استفاده کنید که مواردی مانند موسیقی یا داده های حساب را فهرست می کند، می توانید این کار را نیز انجام دهید. مؤلفه کارت برای بچه ها اهمیتی ندارد. شما فقط از عنصر wrapper استفاده مجدد می کنید، که در این مورد حاشیه و عنوان استایل شده است.

نقطه ضعف استفاده از کودکان این است که شما فقط می توانید یک نمونه از پایه کودک داشته باشید. گاهی اوقات، شما می خواهید که یک جزء دارای JSX سفارشی در مکان های مختلف باشد. خوشبختانه شما می توانید این کار را با قرار دادن کامپوننت های JSX و React به عنوان props انجام دهید که در مرحله بعد به آن خواهیم پرداخت.

مرحله 4 - انتقال کامپوننت ها به عنوان قطعات

در این مرحله ، مؤلفه کارت خود را تغییر می دهید تا سایر مؤلفه ها را به عنوان غرفه ها ببرد. با این کار حداکثر انعطاف پذیری مؤلفه شما برای نمایش اجزای ناشناخته یا JSX در چندین مکان در طول صفحه فراهم می شود. بر خلاف کودکان ، که فقط یک بار می توانید از آنها استفاده کنید ، می توانید به همان اندازه اجزای غرفه ای داشته باشید ، و در عین حال که ظاهری و ساختار استاندارد را حفظ می کنید ، به مؤلفه بسته بندی خود امکان سازگاری با انواع نیازها را می دهید.

در پایان این مرحله ، شما یک مؤلفه خواهید داشت که می تواند مؤلفه های کودکان را ببندد و همچنین سایر اجزای موجود در کارت را نشان می دهد. این الگوی در صورت نیاز به ایجاد مؤلفه هایی که به اطلاعاتی پیچیده تر از رشته ها و عدد صحیح ساده تر هستند ، به شما انعطاف پذیری می دهد.

بیایید مؤلفه کارت را اصلاح کنیم تا یک عنصر React خودسرانه به نام جزئیات را بدست آوریم.

ابتدا مؤلفه کارت را باز کنید:

در مرحله بعد ، یک پروانه جدید به نام جزئیات اضافه کنید و آن را در زیر عنصر قرار دهید:

این پروانه همان نوع کودکان را خواهد داشت ، اما باید اختیاری باشد. برای اختیاری آن ، مقدار پیش فرض تهی را اضافه می کنید. در این حالت ، اگر کاربر هیچ جزئیاتی را منتقل کند ، مؤلفه همچنان معتبر خواهد بود و چیز دیگری را نشان نمی دهد.

ذخیره کنید و فایل را ببندید. این صفحه تازه می شود و همان تصویر قبلی را مشاهده خواهید کرد:

اکنون برخی از جزئیات را به کارت حیوانات اضافه کنید. اول ، کارت حیوانات باز.

از آنجا که مؤلفه کارت در حال حاضر از کودکان استفاده می کند ، باید مؤلفه جدید JSX را به عنوان یک پیشنهاد منتقل کنید. از آنجا که اینها همه پستانداران هستند ، آن را به کارت اضافه کنید ، اما آن را در برچسب ها بپیچید تا آن را ایتالیایی کند.

فایل را ذخیره کنید. هنگامی که این کار را انجام دادید ، مرورگر تازه می شود و به روزرسانی ، از جمله عبارت پستاندار را مشاهده خواهید کرد.

این پروپ در حال حاضر قدرتمند است زیرا می تواند JSX را از هر اندازه ای بگیرد. در این مثال ، شما فقط یک عنصر واحد را اضافه کردید ، اما می توانید به همان اندازه که می خواستید JSX را عبور دهید. همچنین لازم نیست JSX باشد. اگر به عنوان مثال یک نشانه پیچیده دارید ، نمی خواهید آن را مستقیماً در غرفه منتقل کنید. خواندن این کار دشوار خواهد بود. در عوض ، شما می توانید یک جزء جداگانه ایجاد کرده و سپس مؤلفه را به عنوان یک prop منتقل کنید.

برای دیدن این کار در محل کار ، AnimalDetails را به جزئیات ارسال کنید:

Animaldetails پیچیده تر است و دارای چندین خط نشانه گذاری است. اگر قرار بود آن را مستقیماً به جزئیات اضافه کنید ، این امر باعث افزایش قابل ملاحظه ای می شود و خواندن آن را دشوار می کند.

ذخیره کنید و فایل را ببندید. هنگامی که این کار را انجام دادید ، مرورگر تازه می شود و جزئیات در بالای کارت ظاهر می شود.

اکنون یک جزء کارت دارید که می تواند JSX سفارشی را مصرف کند و آن را در چندین نقطه قرار دهد. شما محدود به یک پروانه نیستید. می توانید عناصر را به همان اندازه که می خواهید منتقل کنید. این به شما امکان ایجاد مؤلفه های بسته بندی انعطاف پذیر را می دهد که می تواند به سایر توسعه دهندگان این فرصت را بدهد که ضمن حفظ سبک و عملکرد کلی آن ، یک مؤلفه را سفارشی کنند.

عبور از یک مؤلفه به عنوان یک غرفه کامل نیست. خواندن آن کمی دشوارتر است و به اندازه فرزندان در حال گذر واضح نیست ، اما آنها به همان اندازه انعطاف پذیر هستند و می توانید به همان اندازه که می خواهید در یک مؤلفه استفاده کنید. شما ابتدا باید از کودکان استفاده کنید ، اما اگر این کافی نیست ، دریغ نکنید که به سمت غرفه ها برگردید.

در این مرحله ، شما یاد گرفتید که چگونه JSX و React را به عنوان غرفه به مؤلفه دیگری منتقل کنید. این امر به مؤلفه شما انعطاف پذیری می دهد تا در بسیاری از مواقع که یک جزء بسته بندی ممکن است برای رسیدگی به JSX یا مؤلفه ها به چندین غرفه نیاز داشته باشد ، رسیدگی کند.

نتیجه

شما انواع مختلفی از اجزای بسته بندی را ایجاد کرده اید که می توانند ضمن حفظ ظاهری و ساختار قابل پیش بینی ، داده ها را انعطاف پذیر نشان دهند. شما مؤلفه هایی را ایجاد کرده اید که می توانند غرفه های ناشناخته را به اجزای تو در تو جمع آوری و منتقل کنند. شما همچنین از Prop داخلی کودکان برای ایجاد اجزای بسته بندی استفاده کرده اید که می توانند تعداد خودسرانه ای از عناصر تو در تو را تحمل کنند. سرانجام ، شما یک مؤلفه ایجاد کرده اید که می تواند اجزای JSX یا React را به عنوان یک غرفه در نظر بگیرد تا مؤلفه بسته بندی شما بتواند چندین نمونه از سفارشی سازی های مختلف را اداره کند.

اجزای بسته بندی به شما امکان سازگاری با شرایط ناشناخته را می دهند و در عین حال استفاده مجدد از کد و قوام را نیز به حداکثر می رسانند. این الگوی برای ایجاد عناصر اصلی UI مفید است که در طول برنامه از جمله: دکمه ها ، هشدارها ، مودال ها ، نمایش های اسلاید و موارد دیگر از آن استفاده مجدد خواهید کرد. خود را بارها و بارها به آن باز می گردید.

اگر می خواهید به آموزش های بیشتر React نگاه کنید ، به صفحه موضوع React ما مراجعه کنید ، یا به صفحه سری REACT. JS به صفحه نحوه کدگذاری برگردید.

اگر از این آموزش و جامعه وسیع ما لذت بردید ، در نظر بگیرید که محصولات دیجیتالی ما را بررسی کنید که می تواند به شما در دستیابی به اهداف توسعه نیز کمک کند.

سری آموزش: نحوه کد در react. js

React یک چارچوب محبوب JavaScript برای ایجاد برنامه های جلویی ، مانند رابط های کاربر است که به کاربران امکان تعامل با برنامه ها را می دهد. در ابتدا توسط Facebook ایجاد شده است ، با این امکان که توسعه دهندگان بتوانند برنامه های سریع را با استفاده از یک الگوی برنامه نویسی بصری که JavaScript را با یک نحو HTML مانند معروف به JSX مرتبط می کند ، محبوبیت خود را به دست آورد.

در این سری ، شما می توانید نمونه هایی از پروژه های React را برای درک این چارچوب به دست آورید ، دانش لازم را برای دنبال کردن توسعه وب جلوی آن یا شروع به کار خود برای توسعه کامل پشته می کنید.