วิธีใช้ Props children ใน react

สวัสดีครับ บทความนี้จะเป็นการเรียนรู้และ ทําความเข้าใจในส่วนของเรื่อง Props children ใน React รวมไปถึงวิธีการใช้งานในแบบต่างๆ

Props children คืออะไร

Props Children คือ เป็น Props พิเศษที่ถูกสร้างขึ้นโดยอัตโนมัติ เมื่อ Component ใดๆมี  Element ลูก ดังตัวอย่างนี้

ในตัวอย่างจะเห็นว่าใน MovieBrowser Component มี Element อื่นๆ อยู่ภายใน(Movie Component) ซึ่งเราสามารถเข้าถึง Element เหล่านี้ได้จาก Props พิเศษที่ชื่อว่า Children ใน MovieBrowser Component

เรามาลองสร้าง Component ที่มี Element ลูก ตามตัวอย่างนี้

โดยผมตั้งโจทย์ว่า จะสร้าง Component ที่รับ Element ลูกมา แล้วนํามาแสดงผล ใน Component ของตัวเอง

จะได้แบบนี้

จาก Code ด้านบนเราสามารถเข้าถึง Element ลูกได้จาก this.props.children ซึ่งตัวแปรนี้จะถูกสร้างขึ้นอัตโนมัติ เมื่อมี Element ลูก โดยจะเก็บ Object ของ Element ลูกไว้ทั้งหมด

Elememt ลูก มี Elememt เดียว  หรือหลาย Elememt  ก็ได้ครับ

เมื่อนํา Component มาเรียกใช้ จะเรียกใช้ตามภาพด้านล่าง

เมื่อรันโปรแกรม จะได้คําว่า "My movie" แสดงบนหน้าจอ

Multiple children

ในกรณีที่ภายใน Component มีหลาย Element แบบนี้

เราสามารถเข้าถึง Element เหล่านั้นได้ตามตัวอย่างด้านล่าง

จาก Code เราสามารถเข้าถึง element ลูก แต่ละตัวได้แบบ Array

การเข้าถึง Props ใน Element ลูก

ถ้าเราต้องการจะเข้าถึง props ของ Element ลูก แบบนี้

สามารถเข้าถึงตรงๆแบบนี้ได้เลยครับ

เราได้เรียนรู้การใช้งานพื้นฐานกันไปแล้ว ลําดับต่อไปจะมาเรียนรู้การใช้งาน React.Children เพื่อจักการกับ Element ลูก

React.Children.map() และ React.cloneElement()

React.Children.map() เป็น Function สําหรับ loop ตามจํานวนของ Element ลูก ส่วน React.cloneElement() เป็น Function สําหรับ Clone Element ซึ่งเราสามารถเพิ่มเติม Props ให้กับ Element ที่เรา Clone มาได้

มาดูตัวอย่างการใช้งานของทั้งสอง function นี้ โดยผมตั้งโจทย์ว่า สร้าง component เพื่อ เปลี่ยน style ให้กับ Element ลูก

ตาม code ด้านล่าง

นํา Component ไปใช้

จะได้ผลแบบนี้

React.Children.forEach()

มีการทํางานคล้ายๆกับ React.Children.map() แต่จะไม่ Return value ออกมา คือ loop ตามจํานวนของ Element อย่างเดียว

React.Children.count()

React.Children.count() จะ Return จํานวน ของ Element ลูกทั้งหมดออกมา

React.Children.only()

React.Children.only() มีไว้ทําหรับตรวจสอบว่า มี Element ลูกเดียว Element เดียวหรือไม่

React.Children.toArray()

React.Children.toArray() เป็น function แปลงเป็น array โดยจะเพิ่ม kay มาด้วย จะทําให้เราจัดการ เรียงลําดับ หรือการแสดงผลได้ง่ายขึ้น

Comments