เริ่มต้นใหม่ด้วย 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

/components/Header.js

/pages/about.js

/pages/index.js

/pages/index.js

/pages/index.js

ทีนี้ Index กับ About ก็ Clean ขึ้นมาทันที ผลลัพธ์ที่ได้ก็โอเคเลย

เฮ้ย !! เดี๋ยวมันดีพอแล้วรึยัง ??

  • ถ้ามี Footer เพิ่มอีกละ
  • ถ้ามี Menu ทางซ้ายด้วยทุกหน้าได้ไหม
  • ถ้ามี xxx@&#*^ เพิ่มอีกเต็มไปหมดเลย

เอิ่ม…ก็คงจะมี <Header /> <Footer /> ซ้ำในทุกๆหน้า…อีกแล้ว !!
งั้นเรามาสร้าง Layout Template ให้ทุกหน้าใช้เลยดีกว่า !!

เริ่มจากสร้างไฟล์ /components/Footer.js ขึ้นมาก่อน

/components/Footer.js

และสร้าง /components/Layout.js ขึ้นมา

/components/Layout.js

เห็นอะไรเพิ่มมาไหมเอ่ย….!! ในบรรทัดที่ 7 สำหรับคนเคยเขียน React มาก่อนคงคุ้นเคยกันดี

props.children นั่นก็คือ…ยัง…ยังไม่อธิบาย ไปดูไฟล์ index.js กับ about.js กันก่อนดีกว่า (กวนตีนเนอะ 5555)

/pages/index.js
/pages/about.js

เปลี่ยนจากเดิม Import Header มาใช้ ก็ใช้เป็น Layout แทนทั้ง 2 page เลย

มาดูผลลัพธ์กัน

ดีงาม เอาหละ กลับมาอธิบายเรื่อง props.children

props.children คืออะไร?

props คือ object ที่เก็บค่าต่างๆที่ส่งมานั่นเอง
หากใช้ React Developer Tools จะเห็นว่าทั้ง Index และ About มีส่ง parameters เข้าไปยัง /Layout.js

ตัวอย่างจากหน้า index

หน้า Index มีการส่ง children เข้ามาลองขยายอ่านดูรวมๆแล้ว Array 2 ตัวนั้นมันก็คือ
บรรทัดที่ 5 <h1>Sawatdee Next.js</h1>
บรรทัดที่ 6 <p>Index</p>
นั่นเอง แต่ถูกส่งมาในรูปแบบของ React

ฉะนั้น…ในการใช้ {props.children} ใน Layout นั้นก็คือ การเอา Content/Tag/Element/ฯลฯ ที่อยู่ภายใต้ <Layout>….</Layout> มาแสดงผล

True e-Logistics

JOIN THE FORCE

)

Suvichan Prasongphonchai(Aod)

Written by

Oh yeahhh,Code for life

True e-Logistics

JOIN THE FORCE

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade