Create-React-App : Props

props ย่อมาจาก Properties คือ เอาไว้ผ่านค่าเข้าไปยัง Component และ Component นำค่า props ไปใช้ในส่วนต่างๆ ของ Component

มาดูวิธีการผ่านค่ากัน !!!

การผ่านค่า props ไปยัง Child Component มี 2 แบบ

การผ่านค่า props ค่าเดียว และ การผ่านค่า props หลายค่า ให้กับ Component

การผ่านค่า props เพียงค่าเดียว ให้กับ ChildComponent

การผ่านค่า props หลายค่า ให้กับ ChildComponent

มาลองเขียนกัน ให้เราไปที่ App.js และแทรกเอลิเมนต์ที่ต้องการจะผ่านค่าให้ ในที่นี้เราเลือกเป็น เอลิเมนต์ FunctionName อย่าลืม อิมพอร์ตเข้ามาด้วยน่ะ “ตอนนี้ FunctionName เป็น ChildComponent ของ App [Appที่ถูกเขียนในรูปของ Functioncomponent ]”

มีการผ่านค่า props แบบค่าเดียว และหลายค่า ให้กับ ChildComponent ที่ชื่อว่า FunctionName และ ClassComponent

มาดูค่า props กันทุกคน !!! ที่เราผ่านค่าเข้าไปกัน

การดูค่า props ใน FunctionComponent

เราต้องการจะเห็นค่าที่เราผ่านค่าเข้าไป ให้เราไปที่ ไฟล์ Function.js และ ผ่านค่า props เข้าไปใน FunctionName ค่อย console.log() แสดงค่า Properties ออกมาให้เรา ทางหน้าต่าง Console บน Browser

เราใช้วิธีการ props เข้าไป เราก็ต้องใช้ให้ props ออกมา ผ่านค่า props เข้าไปใน FunctionComponent และ console.log(props) ออกมาดู

การดูค่า props ใน ClassComponent

เราต้องการจะเห็นค่าที่เราผ่านค่าเข้าไป ให้เราไปที่ ไฟล์ ClassComponent.js โดยการ console.log(this.props) แสดงค่า Properties ออกมาให้เรา ทางหน้าต่าง Console บน Browser

การดูค่า props ใน ClassComponent

เมื่อ console ออกมาแล้วจะได้ดังนี้ ถือว่าสำเร็จ

มาถึงการนำค่าที่ผ่านมาใช้งานแล้วล่ะ!!!

การใช้งาน props ใน FunctionComponent

เมื่อเราผ่านค่า props ไปใน FunctionComponent แล้ว เราก็ต้องการที่จะใช้งานค่า ที่อยู่ใน props นั้นได้

อันดับแรกให้เราไปที่ไฟล์ Function.js และผ่านค่าพารามิเตอร์ props เข้าไปให้ฟังก์ชัน และสร้างตัวแปร id มาเก็บค่า props.id ที่ผ่านเข้ามา

การผ่านค่า props

props.children; //children คือเนื้อหาของเอลิเมนต์ที่ผ่านเข้ามาใน Component จะเป็นข้อความธรรมดา

อันดับที่สอง ไปที่ไฟล์ App.js แล้วแทรกเอลิเมนต์<FuntionName></FunctionName>

แทรกเอลิเมนต์<FuntionName></FunctionName> ผ่านค่า id=”1” และเนื้อหาไปในเอลิเมนต์

ภาพตัวอย่างการใช้งาน props ใน FunctionComponent

การใช้งาน props ใน ClassComponent

ใน ClassComponent React กำหนดให้ props เป็น properties ของ class โดยอัตโนมัติ ถ้าต้องการใช้งาน props ที่ผ่านเข้ามาใน Component ก็อ้างค่าต่างๆใน props ได้เลย

อันดับแรกให้ไปที่ไฟล์ ClassComponent.js

เราสามารถอ้างอิงค่าต่างๆ ได้เลย

อันดับที่สองไปที่ไฟล์ App.js และแทรกเอลิเมนต์ <ClassComponent></ClassComponent> ผ่านค่า id=”one” และเนื้อหาไปในเอลิเมนต์

แทรกเอลิเมนต์ <ClassComponent></ClassComponent> ผ่านค่า id=”one” และเนื้อหาไปในเอลิเมนต์

ตรงตามที่เราผ่านค่าเข้าไปเนอะ

การรับค่า Children ที่มาจาก props

ใน JSX เนี่ย จะมีแท็กเปิดและแท็กปิด เช่น <FunctionName></FunctionName> เราอ่ะ สามารถแทรกข้อความ แทรกแท็ก หรือ Component ลงไปได้ ระหว่างแท็กได้ เช่น อย่างงี่ๆๆ

แทรกข้อความ
<FunctionName id="1">Hello</FunctionName> 
แทรกแท็ก
<FunctionName id="2"><h3>Hello</h3></FunctionName>
แทรก Component
<FunctionName id="3"><ClassComponent data="9 Stars" userId="3" /></FunctionName>

เรามาดูกัน การรับค่า Children ที่มาจาก props และเราจะเขียนแบบ แทรก Component

เราเริ่มต้นไปที่ไฟล์ Function.js และแก้ไขโค้ด

Function.js

เสร็จแล้วไปที่ไฟล์ ClassComponent.js และแก้ไข

ClassComponent.js

สุดท้ายไปที่ไฟล์ App.js เพื่อที่จะดูค่า children ที่มาจาก props

App.js

มาดูผลลัพธ์กัน ตรงตามที่เราผ่านค่ามาจ้า

การรับค่า Children ที่มาจาก props

อะเคร!!! ไว้มาต่อกันอีก ตอนนี้เราผ่านค่า props ไปยัง Child Component ได้แล้ว บ๊ายยยย ครั้งหน้าเราจะมาตกแต่งกันด้วย CSS และ Bootstrap