วิธีสร้าง MODAL ROUTE ด้วย REACT ROUTER

Modals มีประโยชน์มากสำหรับการแสดงมุมมองหนึ่งบนอีกมุมมองหนึ่ง

อย่างไรก็ตาม พวกมันเป็นมากกว่าตำแหน่ง |_+_| องค์ประกอบที่ห่อหุ้มทุกอย่างเมื่อนำไปปฏิบัติ โดยเฉพาะอย่างยิ่งหากคุณต้องการ URL แบบไดนามิก การรีเฟรชหน้า หรือการโต้ตอบแบบเลื่อนอย่างง่ายบนอุปกรณ์เคลื่อนที่

ในบทความนี้ เราจะพูดถึงแง่มุมต่างๆ ของโมดอลและระบุวิธีแก้ไขเพื่อให้เป็นไปตามข้อกำหนดที่มาพร้อมกับการสร้าง URL แบบไดนามิก การรีเฟรชหน้า และคุณลักษณะอื่นๆ

ก่อนเริ่มสร้างองค์ประกอบโมดอล เรามาเริ่มด้วยพื้นฐานของ .กันก่อน react-router บรรจุุภัณฑ์.

เราจะใช้สี่องค์ประกอบจากแพ็คเกจนี้: BrowserRouter, Route, Link และ Switch

เนื่องจากนี่ไม่ใช่ react-router กวดวิชาฉันจะไม่อธิบายว่าแต่ละองค์ประกอบเหล่านี้ทำอะไร

อย่างไรก็ตาม หากคุณต้องการทราบข้อมูลเกี่ยวกับ react-router , สามารถตรวจสอบได้ นี้ หน้าหนังสือ.

การกำหนดเส้นทางพื้นฐาน

ขั้นแรก ไปข้างหน้าและติดตั้ง |_+_| ผ่าน น.

แถบนำทางด้านข้าง html

ที่ระดับบนสุดของแอปพลิเคชันของคุณ ให้ใช้ |_+_| องค์ประกอบเพื่อห่อแอปของคุณ

react-router-dom

ภายใน |_+_| คุณจะต้องระบุเส้นทางเพื่อให้คุณสามารถแสดงมุมมองเฉพาะเมื่อหนึ่งในนั้น - หรือไม่มีเลย - ตรงกัน

สมมติว่าเรามีองค์ประกอบที่แตกต่างกันสามส่วนที่จะแสดงผล: |_+_|, |_+_| และ |_+_|. เราจะสร้างเมนูการนำทางซึ่งจะปรากฏที่ด้านบนสุดของแอปพลิเคชันเสมอ

|_+_| หรือ |_+_| ส่วนประกอบจาก |_+_| ใช้สำหรับการนำทาง ในขณะที่ |_+_| มีคุณสมบัติพิเศษที่สามารถใช้ได้กับสไตล์เฉพาะเมื่อ URL ปัจจุบันตรงกัน

ในแง่ของการใช้งาน คุณสามารถใช้อันใดอันหนึ่งได้

ด้านล่างนี้คือโครงสร้างพื้นฐานของเมนูการนำทาง ซึ่งจะเปลี่ยน URL ตามนั้น:

npm install react-router-dom --save

สิ่งต่อไปที่เราจะทำคือใช้กลไกที่ตรงกับ URL และแสดงส่วนประกอบเฉพาะ

|_+_| แสดงตำแหน่งที่ตรงกันครั้งแรกที่ระบุโดย |_+_| เด็ก. เมื่อไม่มีอะไรตรงกัน อันสุดท้าย |_+_| ถูกส่งกลับ — มักจะเป็นหน้า 404

การสร้างองค์ประกอบโมดอล

จนถึงตอนนี้ เราได้ใช้โครงสร้างการกำหนดเส้นทางพื้นฐานแล้ว ตอนนี้เราสามารถสร้างองค์ประกอบโมดอลและแสดงเป็นโอเวอร์เลย์ได้

แม้ว่าจะมีวิธีการต่างๆ มากมายในการสร้างส่วนประกอบที่เป็นโมดอล แต่เราจะกล่าวถึงเพียงวิธีเดียวเท่านั้น

ส่วนประกอบโมดอลมีองค์ประกอบห่อหุ้มที่ครอบคลุมทั้งหน้าจอ — กว้างและสูง

พื้นที่นี้ยังทำหน้าที่เป็น |_+_| เครื่องตรวจจับ จากนั้นองค์ประกอบโมดอลจริงจะอยู่ในตำแหน่งที่สัมพันธ์กับองค์ประกอบห่อหุ้มนั้น

ตัวอย่างขององค์ประกอบเราเตอร์โมดอล

ด้านล่างนี้เป็นตัวอย่างของ |_+_| องค์ประกอบการทำงานโดยใช้ |_+_| HOC (ส่วนประกอบลำดับที่สูงขึ้น) เพื่อเข้าถึงประวัติเราเตอร์และเรียก |_+_| วิธีการเปลี่ยน URL ของแอปพลิเคชันเมื่อปิดโมดอลเมื่อคลิกเป็น |_+_|

|_+_| ใช้เพื่อป้องกันการแพร่กระจายของเหตุการณ์การคลิกและทริกเกอร์ |_+_| บน |_+_| ซึ่งจะปิดโมดอลเมื่อจริง |_+_| องค์ประกอบถูกเปิดใช้งาน

import { BrowserRouter } from 'react-router-dom'; ReactDOM.render( , document.getElementById('root') );

จัดแต่งทรงผม |_+_| ก็สำคัญไม่แพ้กัน ด้านล่างนี้ คุณสามารถค้นหาสไตล์พื้นฐานที่ใช้ในการทำให้ครอบคลุมทั้งหน้าจอและปรากฏเหนือเนื้อหา

ใช้ |_+_| เปิดใช้งานการเลื่อนแบบยืดหยุ่นบนอุปกรณ์ iOS

การเปิดมุมมองโมดอล

องค์ประกอบโมดอลที่เราสร้างขึ้นควรแสดงผลที่ด้านบนของมุมมองที่มีอยู่เมื่อมีการจับคู่ URL เฉพาะ ซึ่งหมายความว่าเราต้องเปลี่ยน URL เพื่อให้กลไกการกำหนดเส้นทางสามารถตัดสินใจได้ว่าจะแสดงอะไร

เรารู้ว่า |_+_| แสดงตำแหน่งแรกที่ตรงกัน แต่การซ้อนทับแบบโมดอลต้องการสอง |_+_| การแสดงส่วนประกอบในเวลาเดียวกัน

สามารถทำได้โดยการใส่กิริยา |_+_| จาก |_+_| และแสดงผลแบบมีเงื่อนไข

ในกรณีนี้ เราควรจะสามารถตรวจจับได้ว่า modal นั้นทำงานอยู่หรือไม่

วิธีที่ง่ายที่สุดในการทำเช่นนี้คือการส่งตัวแปรสถานะพร้อมกับ |_+_| ส่วนประกอบ.

เช่นเดียวกับที่เราใช้ |_+_| เพื่อสร้างเมนูการนำทาง เราจะใช้เพื่อเรียกมุมมองโมดอล

การใช้งานที่แสดงด้านล่างช่วยให้เรากำหนดตัวแปรสถานะ ซึ่งจะพร้อมใช้งานใน |_+_| prop ซึ่งเราสามารถเข้าถึงได้ภายในองค์ประกอบใด ๆ โดยใช้ |_+_| ฮอก.

ใส่ได้ทุกที่ที่คุณต้องการ การคลิกลิงก์จะเปลี่ยน URL เป็น |_+_|

อาจมีหลายโมดอลที่มีชื่อต่างกัน เช่น |_+_|, |_+_| และอื่นๆ

ในกรณีนี้ คุณไม่ได้ถูกคาดหวังให้กำหนดแต่ละ |_+_| มีวัตถุประสงค์เพื่อให้ตรงกับแต่ละตำแหน่งกิริยา เพื่อจัดการทั้งหมดภายใต้ |_+_| เส้นทาง ใช้ไวยากรณ์ต่อไปนี้:

สิ่งนี้ช่วยให้คุณมีความยืดหยุ่นในการรับค่าฮาร์ดโค้ด |_+_| พารามิเตอร์ภายในองค์ประกอบโมดอลผ่าน |_+_| เสา

นอกจากนี้ยังช่วยให้คุณสร้างการแสดงผลเนื้อหาแบบไดนามิก ขึ้นอยู่กับว่าโมดอลใดเปิดอยู่

จับคู่ตำแหน่งกิริยา

ส่วนนี้มีความสำคัญเป็นพิเศษ เนื่องจากจะระบุกลไกในการแสดงโมดอลที่ด้านบนของมุมมองที่มีอยู่ แม้ว่าพารามิเตอร์ตำแหน่งจะเปลี่ยนไปเมื่อมีการเปิดโมดอล

สถานที่ซื้อ terra (เหรียญลูน่า)

เมื่อเราคลิก |_+_| ลิงก์ที่กำหนดไว้ในส่วนก่อนหน้า จะเปลี่ยนเส้นทางตำแหน่งเป็น |_+_| ซึ่งไม่ตรงกับอะไรใน |_+_|

ดังนั้นเราต้องกำหนดต่อไปนี้ |_+_| บางแห่ง.

เราต้องการแสดง |_+_| ส่วนประกอบเป็นโอเวอร์เลย์

แต่ใส่เข้าไป |_+_| จะจับคู่และแสดงผลเฉพาะ |_+_| ส่วนประกอบ. เป็นผลให้จะไม่มีการซ้อนทับ

ในการแก้ไขปัญหานี้ เราต้องกำหนดทั้งภายในและภายนอก |_+_| พร้อมเงื่อนไขพิเศษ

ด้านล่าง คุณจะเห็นเวอร์ชันที่แก้ไขของตัวอย่างเดียวกัน มีการเปลี่ยนแปลงหลายอย่าง มาลงรายการกันอย่างรวดเร็ว:

laravel 8 ยี่ห้อ:auth

มี |_+_| ตัวแปรที่กำหนดไว้ในตัวสร้าง
มี |_+_| กำหนดตัวแปร ซึ่งขึ้นอยู่กับค่าอื่นๆ
|_+_| กำลังใช้ |_+_| เสา
มี 2 |_+_| |_+_| ใช้ทั้งภายในและภายนอก |_+_| และภายนอกมีการแสดงผลตามเงื่อนไข

เมื่อเปิด modal เราต้องเก็บวัตถุตำแหน่งก่อนหน้าและส่งไปยัง |_+_| แทนที่จะปล่อยให้มันใช้วัตถุตำแหน่งปัจจุบันโดยค่าเริ่มต้น

นี่เป็นเทคนิคพื้นฐาน |_+_| นึกว่ายังอยู่ที่เดิม — เช่น |_+_| — แม้ว่าตำแหน่งจะเปลี่ยนเป็น |_+_| หลังจากเปิดโมดอลแล้ว

สามารถทำได้โดยการตั้งค่า |_+_| บน |_+_|.

ตัวอย่างต่อไปนี้แทนที่ |_+_| ด้วยวัตถุตำแหน่งปัจจุบันเมื่อไม่มีโมดอลเปิด

เมื่อคุณเปิดโมดอล จะไม่แก้ไข |_+_|

เป็นผลให้เราสามารถส่งต่อไปยัง |_+_| เพื่อให้คิดว่าเรายังอยู่ในตำแหน่งเดิม แม้ว่าเราจะเปลี่ยนสถานที่ด้วยการเปิดโมดอล

เรารู้ว่าเมื่อมีการเปิด modal ตัวแปร state ชื่อ |_+_| ใน |_+_| วัตถุจะถูกตั้งค่าเป็น |_+_|

เราสามารถตรวจสอบว่าสถานะของวัตถุตำแหน่งถูกกำหนดและมีตัวแปรสถานะเป็น |_+_| ตั้งค่าเป็น |_+_|

อย่างไรก็ตาม การตรวจสอบทั้งสองนี้เพียงอย่างเดียวไม่เพียงพอในกรณีที่รีเฟรชหน้า

ในขณะที่โมดอลต้องปิดเอง |_+_| ยังคงถือ

ตรวจสอบว่า |_+_| ตรวจสอบให้แน่ใจว่าการรีเฟรชหน้าจะไม่ทำให้เกิดการตั้งค่า |_+_| ถึง |_+_|.

เมื่อมีการเยี่ยมชมเส้นทางโมดอลโดยตรง ซึ่งก็คือ |_+_| ในตัวอย่างของเรา ไม่มีการตรวจสอบใดที่เป็น |_+_|

ตอนนี้เราสามารถใช้ค่าบูลีนนี้เพื่อแสดงผลทั้ง |_+_| นอก |_+_| และตัดสินใจว่า |_+_| . อันไหน วัตถุที่จะส่งไปยัง |_+_| เสาของ |_+_|.

ระบุว่า |_+_| คอมโพเนนต์มีรูปแบบที่จำเป็น ซึ่งส่งผลให้มีการแสดงผลสองมุมมองที่แตกต่างกัน

การแสดงมุมมองกิริยาที่แตกต่างกัน

จนถึงตอนนี้ เราได้นำโมดอลของเราไปใช้ในลักษณะที่ทำให้มั่นใจว่าเราจะไม่แสดงโอเวอร์เลย์เมื่อรีเฟรชหน้าด้วยโมดอลแบบเปิด หรือเมื่อไปที่เส้นทางโมดอลโดยตรง

แต่เราแสดงผลเฉพาะการจับคู่ |_+_| . เท่านั้น ข้างใน |_+_|.

ในกรณีนี้ สไตล์ที่คุณต้องการใช้มักจะแตกต่างออกไป หรือคุณอาจต้องการแสดงเนื้อหาที่แตกต่างออกไป

ทำได้ง่ายมากโดยการส่ง |_+_| ตัวแปรเป็นตัวประกอบบน |_+_| ส่วนประกอบดังที่แสดงด้านล่าง

จากนั้น คุณสามารถใช้สไตล์ที่แตกต่างกันหรือคืนค่ามาร์กอัปที่ต่างไปจากเดิมอย่างสิ้นเชิงได้ ทั้งนี้ขึ้นอยู่กับมูลค่าของพร็อพ

react-router-dom

ป้องกันการเลื่อนที่อยู่ใต้โมดัล

เมื่อคุณเปิดโมดอลบนเบราว์เซอร์บางตัว อาจมีเนื้อหาด้านล่างเลื่อนอยู่ใต้โมดอล ซึ่งไม่ใช่การโต้ตอบที่พึงประสงค์

ใช้ |_+_| บน |_+_| เป็นความพยายามครั้งแรกในการบล็อกการเลื่อนบนทั้งหน้า

อย่างไรก็ตาม แม้ว่าวิธีนี้จะใช้ได้ดีบนเดสก์ท็อป แต่ก็ล้มเหลวใน Safari บนมือถือ เนื่องจากโดยทั่วไปแล้วจะละเว้น |_+_| บน |_+_|.

มีแพ็คเกจ npm ที่แตกต่างกันหลายแพ็คเกจที่พยายามแก้ไขปัญหาการล็อคการเลื่อนนี้ในทุกแพลตฟอร์ม

ฉันพบว่า ตัวเลื่อนล็อค แพ็คเกจค่อนข้างมีประโยชน์

จากแพ็คเกจนี้ คุณสามารถนำเข้า |_+_| และ |_+_| ฟังก์ชัน ซึ่งยอมรับการอ้างอิงถึงองค์ประกอบที่คุณต้องการให้การเลื่อนคงอยู่เป็นอินพุต

เมื่อโมดอลเปิดอยู่ เราต้องการปิดใช้งานการเลื่อนสำหรับทั้งหน้า ยกเว้นโมดอลเอง

จึงต้องเรียก |_+_| และ |_+_| ทำงานเมื่อมีการประกอบและถอดส่วนประกอบโมดอลตามลำดับ

เพื่อรับการอ้างอิงถึงผู้ปกครอง |_+_| ขององค์ประกอบโมดอล เราสามารถใช้ |_+_| API จาก React และส่งต่อเป็นข้อมูลอ้างอิงไปยัง parent |_+_|

ข้อมูลโค้ดด้านล่างปิดใช้งานการเลื่อนเมื่อโมดอลเปิดอยู่ และเปิดใช้งานอีกครั้งเมื่อคอมโพเนนต์โมดอลกำลังจะยกเลิกการต่อเชื่อม

ใช้ |_+_| เนื่องจากอินพุตสำหรับฟังก์ชันที่นำเข้าเหล่านี้จะป้องกันไม่ให้เนื้อหาของคอมโพเนนต์โมดอลถูกเลื่อนล็อค

ก่อนใช้ |_+_| เราต้องตรวจสอบอย่างง่าย

เนื่องจากส่วนประกอบโมดอลอาจได้รับการติดตั้งหากหน้าถูกรีเฟรชเมื่อเปิดโมดอล หรือเมื่อมีการเยี่ยมชมเส้นทางโมดอลโดยตรง

วิธีตรวจสอบเงินฝากที่ค้างอยู่ในแอพเงินสด

ในทั้งสองกรณี ไม่ควรปิดการเลื่อน

เราผ่าน |_+_| . แล้ว ตัวแปรเป็นตัวประกอบ |_+_| เพื่อแสดงมุมมองที่แตกต่างกัน ดังนั้นเราจึงสามารถใช้พร็อพนี้เพื่อตรวจสอบว่ามีโมดอลจริงหรือไม่

ด้านล่างนี้เป็นเวอร์ชันแก้ไขของคอมโพเนนต์โมดอล:

บทสรุป

ตอนนี้คุณเข้าใจแล้วว่ามุมมองโมดอลทำงานอย่างไร เช่นเดียวกับปัญหาบางอย่างที่คุณอาจพบขณะใช้งานการผสานรวมของคุณเอง

ดูตัวอย่างการใช้งานได้ที่ นี้ โครงการแซนด์บ็อกซ์โค้ด

#reactjs #react #เส้นทางตอบโต้

blog.logrocket.com