https://virgool.io/feed/@daniyal4v fa 2026-04-15 08:56:31 https://files.virgool.io/upload/users/69991/avatar/avatar.png?height=120&width=120 https://virgool.io/@daniyal4v https://virgool.io/@daniyal4v/%D8%AF%D8%B1%D9%88%D8%A7%D8%B2%D9%87-%D8%A7%DB%8C-%D8%A8%D9%87-%D8%B3%D9%88%DB%8C-%D8%AF%DB%8C%DA%AF%D8%B1%DB%8C-%D8%A7%D8%B2-dom-%D8%AF%D8%B1-%D8%B1%DB%8C%DA%A9%D8%AA-si8oswupbzee پورتال ها (Portals) ویژگی جدیدی در ریکت اند که به ما کمک میکنند المنتی را در جای مشخصی از DOM قرار بدیم. همانطور که میدونید تموم کامپوننت ها و المنت هایی که در ریکت میسازیم، درون المنتی با آیدی "root " قرار میگیرند، حال با معرفی پورتال ها، ما به راحتی میتونیم Modals, Tooltips, Popovers, Loader و کلا المنت هایی که استایل به خصوصی دارند رو به خونه جدیدی منتقل کنیم!نمای دیگری از پورتال ها :)نحوه استفاده از اونا خیلی راحته، کافیه در قسمت return کامپوننت بنویسیم:نکته 1: element همان المنتی هست که میخواهیم در خارج از سلسه مراتبش قرار بگیرد.نکته 2: domNode آدرس قسمت مد نظرمون از DOM که برای اشاره کردن به آن، میتونیم از getElementById، querySelector و... استفاده کنیم.برای واضح تر شدن مطلب، بیاید یه مثال بنویسیم:در قدم اول، در صفحه index.HTML، المنت جدیدی را با آیدی مد نظر میسازیم:و در قدم دوم، المنت مد نظر را درون تابعی که بهش اشاره کردم، قرار میدهیم:به همین راحتی، میتوان یک المنتی را به جای دیگری از DOM منتقل کرد! دانیال کارگری دانیال کارگری Wed, 21 Jul 2021 21:56:31 +0430 https://virgool.io/@daniyal4v/%D8%A8%D9%87%D8%AA%D8%B1%DB%8C%D9%86-%DA%A9%D8%AA%D8%A7%D8%A8%D8%AE%D8%A7%D9%86%D9%87-%D8%A2%DB%8C%DA%A9%D9%88%D9%86-%D8%AF%D8%B1-%D8%B1%DB%8C%DA%A9%D8%AA-eggh70avxbgt حتما برای شما هم پیش اومده قبل از شروع پروژه، بین پکیج آیکون های مختلف سردرگم بشید و ندونید از کدوم استفاده کنید، و حتی گاهی به دلیل پیدا نکردن آیکون موردعلاقه در پکیج نصب شده، مجبور به نصب پکیج های دیگری نیز شوید.بهتره بدونید کتابخانه ای به اسم react icons ساخته شده که تقریبا 20 پکیج مختلف آیکون را درون خودش دارد مانند FontAwsome، Bootstrap Icons و...این کتابخانه را با دستور زیر نصب میکنیم:به عنوان قدم بعدی باید آیکون های مد نظر را به پروژه اضافه کنیم:توجه داشته باشید که هر آیکون را جداگانه و از فولدر خودش باید ایمپورت کنید.بعد از ایمپورت، میتوان از آیکون ها به صورت یک کامپوننت استفاده و با CSS به آن ها استایل بدهیم:با 'transform: 'scaleX(-1) میتوان یک المنت را flip کرد.به همین راحتی!توصیه میکنم برای خواندن توضیحات بیشتر و سرچ بین آیکون ها به نشانی https://react-icons.github.io/react-icons/ سری بزنید. دانیال کارگری دانیال کارگری Mon, 19 Jul 2021 20:22:50 +0430