เริ่มต้นใหม่ด้วย Next.js บทที่ 3 Shared Components
จากบทที่ 2 จะเห็นว่าเรามี Menu ซ้ำๆ กันทั้งในหน้า Index และ About เอาหละ…ทำไมไม่จับมันรวมกันซะหละ?
เริ่มจากเราจะสร้าง Directory /components ก่อน จากนั้นสร้างไฟล์ /components/Header.js เอาหละเรามาย้าย Menu ไปอยู่ Header.js
รวมกันไปเลยจัดไป !!
จะได้ Structure ประมาณนี้
├── /components
│ ├── Header.js
├── /pages
│ ├── index.js
│ └── about.js
/components/Header.js
/pages/about.js
/pages/index.js
ทีนี้ Index กับ About ก็ Clean ขึ้นมาทันที ผลลัพธ์ที่ได้ก็โอเคเลย
เฮ้ย !! เดี๋ยวมันดีพอแล้วรึยัง ??
- ถ้ามี Footer เพิ่มอีกละ
- ถ้ามี Menu ทางซ้ายด้วยทุกหน้าได้ไหม
- ถ้ามี xxx@&#*^ เพิ่มอีกเต็มไปหมดเลย
เอิ่ม…ก็คงจะมี <Header /> <Footer /> ซ้ำในทุกๆหน้า…อีกแล้ว !!
งั้นเรามาสร้าง Layout Template ให้ทุกหน้าใช้เลยดีกว่า !!
เริ่มจากสร้างไฟล์ /components/Footer.js ขึ้นมาก่อน
และสร้าง /components/Layout.js ขึ้นมา
เห็นอะไรเพิ่มมาไหมเอ่ย….!! ในบรรทัดที่ 7 สำหรับคนเคยเขียน React มาก่อนคงคุ้นเคยกันดี
props.children นั่นก็คือ…ยัง…ยังไม่อธิบาย ไปดูไฟล์ index.js กับ about.js กันก่อนดีกว่า (กวนตีนเนอะ 5555)
เปลี่ยนจากเดิม Import Header มาใช้ ก็ใช้เป็น Layout แทนทั้ง 2 page เลย
มาดูผลลัพธ์กัน
ดีงาม เอาหละ กลับมาอธิบายเรื่อง props.children
props.children คืออะไร?
props คือ object ที่เก็บค่าต่างๆที่ส่งมานั่นเอง
หากใช้ React Developer Tools จะเห็นว่าทั้ง Index และ About มีส่ง parameters เข้าไปยัง /Layout.js
หน้า Index มีการส่ง children เข้ามาลองขยายอ่านดูรวมๆแล้ว Array 2 ตัวนั้นมันก็คือ
บรรทัดที่ 5 <h1>Sawatdee Next.js</h1>
บรรทัดที่ 6 <p>Index</p>
นั่นเอง แต่ถูกส่งมาในรูปแบบของ React
ฉะนั้น…ในการใช้ {props.children} ใน Layout นั้นก็คือ การเอา Content/Tag/Element/ฯลฯ ที่อยู่ภายใต้ <Layout>….</Layout> มาแสดงผล
จบแล้วกับบทที่ 3
อ้างอิง
https://learnnextjs.com
https://github.com/doctoraod/sawatdee-next/tree/lesson3
สารบัญ
- บทที่ 1 Setup
- บทที่ 2 Routing
- บทที่ 3 Shared Components
- บทที่ 4 Dynamic Pages
- บทที่ 5 Route Masking (Coming soon…)
