React 909: Props

บทความนี้ไม่ใช่ความรู้ที่ผมทำสรุปเองเเต่เป็นความรู้ที่ได้จาก Code Camp 2 ครับสำหรับใครที่ อยากเป็น Programmer จริงๆ ผมเเนะนำ Camp นี้เลยครับ

บทความนี้ผมเขียนเพื่อมาสรุปในสิ่งที่ผมได้ เท่านั้น

Props (ย่อมาจาก Properties) คือข้อมูลที่ใช้ภายใน Component

ถ้าเอาให้เข้าใจง่ายๆคือ

“Prop ก็คือ Properties(คุณสมบัติ) ของ Component นั้นๆ

ที่ใช้ส่ง คุณสมบัติ ระหว่าง Component นั้น“

เราสามารถกำหนด props ได้ตอนเรียกใช้ Component ใน JavaScript เป็นสเหมือน Object {} ธรรมดาๆ นี่เอง ดังนั้น Props จึงมีได้หลายค่าเเละเก็บค่าในรูปเเบบ key:value

การกำหนด Props

การกำหนด Props ให้กับ Component คล้ายกับกำหนด attribute ใน html มาก เพียงเเต่ว่าเรากำหนดชื่อ attribute เองได้ ส่งค่าเป็น type อื่นๆที่ไม่ใช่ string ได้เเละไม่จำกัดจำนวน

การเรียกใช้ค่า Props: Class Component

Component เเบบ Class จะเรียก props จาก this.props

โดยเราให้ props ชื่อว่า firstName มีค่าเท่ากับ boss และ age มีค่าเท่ากับ 30 นั่นเอง

การเรียกใช้ค่า Props: Functional Component

Component เเบบ Function จะเรียก Props จาก Parameter Props

Type ต่างๆที่เราสามารถใส่ใน Props ได้ Type

อะไรก็ตามที่เราใส่ใน object ได้เราสามารถส่งเข้า props ได้หมดครับ

• Boolean
• Null
• Undefined
• Number
• String
• Object > Array , Date
• Component

ใน Example จะ ไฟล์ที่เราทำงานร่วมกัน 2 ไฟล์ ส่ง Props หากัน ทำงาน ร่วมกับ Component Display

• App.js
• DisplayObj.js

App.js

DisplayObj.js

Default Props

ใช้เพื่อกำหนดค่าตั้งต้นให้ props ใน component

“ หาก props ไม่ถูกส่งมาก็จะใช้ค่านี้แทน”

การใช้ Default

class

มี 2 เเบบ ใช้ได้ทั้ง Component แบบ

• Class

Class

Props Class

• Function *แนะนำ*

Function

App.js

การส่งข้อมูลระหว่าง Parent และ Child Componentใน React

Props children

“Component เเม่ ส่ง ให้ Component ลูก”

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

การส่งข้อมูลระหว่าง Parent และ Child Componentใน React

เนื่องจาก React เป็น Component-based ซึ่งออกแบบมาให้เราเขียนแต่ละส่วนเป็น Component และถ้า Component นั้นๆซับซ้อนมากเกินไป เราก็ควรเขียนเป็น Component ย่อยๆอีกที

A quick intro to React’s props.children

การส่งข้อมูลระหว่าง Component จะแบ่งเป็นรูปแบบต่างๆดังนี้

• Parent ส่งข้อมูลให้ Child
• Child ส่งข้อมูลให้ Parent
• Child ส่งข้อมูลให้ Child ตัวอื่นที่อยู่ใน Parent เดียวกัน

หลักการง่ายๆคือ Component ไหนที่มีการกำหนด children ไว้ Component นั้นก็สามารถเข้าถึงค่า children เพื่อนำไปใช้ต่อได้

1. Parent ส่งข้อมูลให้ Child

Example

• App.js
• Members.js

App.js

การเรียกใช้ค่า Props: Class Component

การเรียกใช้ค่า Props: Functional Component

Component แบบ Class จะเข้าถึงค่า children ได้จาก this.props.children

Component แบบ Function จะเข้าถึงค่า children ได้จาก props.children

Props children มันรู้ได้เมื่อไหร่ ?

ตอนที่เรากำหนด Style ด้วย className หรือ inline-style หรือแม้แต่ตอน Loopที่เรากำหนด key ให้กับ Component สิ่งเหล่านี้ถือเป็นการกำหนด props ให้กับ

component กล่าวคือ ทุกอย่างที่เขียนใน <tag> ตามหลังชื่อ Component เราเรียกว่าการกำหนด props ทั้งหมด

มาลองทำเเบบ Multiple children

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

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

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

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

สามารถเข้าถึงตรงๆแบบนี้ได้เลย ใช่เลือก ได้ด้วย

Props Children มาลอง ทำ

• Component
• Children Component

Component ที่จะทำงานร่วมกัน ก็คือ

“ Child ส่งข้อมูลให้ Child ตัวอื่นที่อยู่ใน Parent เดียวกัน ”

• App.js
• Members.js
• Member.js

App.js

Member.js

Members.js

นำมาใช้กับ State เเละ set State

Parent เวลาเรียกใช้งานและส่งค่าให้ Child

ก็ขึ้นอยู่กับความต้องการเลยว่าจะใส่ค่าลงไปตรงๆหรือว่า

ผูกกับ State ของ Parent เพื่ออัพเดทค่าในภายหลัง

แล้วโยนค่านั้นๆเข้าไปให้ Child ผ่าน Props ซะ

Parant

Child

โดนใน Child จะมี Logic ในการเปลี่ยนเเปลงไปตาม Parent

ถ้าเป็น false ไม่ให้เเสดง button เเต่ถ้าเป็น true ให้เเสดง button

ข้อควรระวังเรื่อง Props

ห้ามแก้ไขค่า props โดยเด็ดขาด

คิดซะว่า props มีสถานะเป็น read only หากมีกรณีที่เราต้องเปลี่ยนแปลงค่า props ให้คิดดูดีๆว่าเราออกแบบ Project ถูกรึเปล่า

ห้ามนำ Props ไปเก็บไว้ใน State โดยเด็ดขาด

ไม่แนะนำให้เอาค่าจาก Props ไปเก็บไว้ใน State นะ เพราะเดี๋ยว Parent จะสั่งอัพเดทค่าทีหลังไม่ได้

Prop-types

เพื่อป้องกันการส่ง Props มาผิด Type ลองใช้ prop-types มาช่วย Validate ได้นะ

ไปอ่านต่อที่บทความต่อไป ….

2. Child ส่งข้อมูลให้ Parent

ที่นี้จาก ลูกมาหาเเม่ ขอ เเม่ไปหาลูกมั้ง

การส่งข้อมูลจาก Child ไปให้ Parent ให้ส่งค่าผ่าน Props ใน

“ ลักษณะของ Callback Function “

คือ การส่ง Function ของ Parent เข้าไปใน Child ผ่าน Props นั่นเอง

เมื่อใดก็ตามที่ Child อยากจะส่งข้อมูลกลับมาก็ให้

เรียก Function ตัวนั้นพร้อมกับค่าที่ต้องการส่งให้ Parent

ตอนที่ Child ไปเรียก Props ตัวนั้นที่เป็น Undefined เพราะว่า Parent ไม่ได้โยน Function เข้ามาให้ ดังนั้นเพื่อไม่ให้ความชิบหายเกิดขึ้น ก็อย่าลืมเช็ค Props ตัวนั้นๆเผื่อไว้ด้วยนะ

จำไว้ ว่า React นั้น ทำงาน เเบบ one way ดังนี้จะไม่มีการ ส่งค่าไปเเละส่งมากับ เเบบนี้เด็ดขาด

React คือ one-way data flow

One-Way ใน React นั้นมี กฎอยู่ว่า

https://www.slideshare.net/hszcg1/react-tech-salon

• parent component ส่ง props ไปหา children component ได้อย่างเดียว
• ส่ง props ขึ้นไปหา parent component ตัวเองไม่ได้ ส่ง props ไปหาญาติ (sibling) ด้านข้างไม่ได้

3. Child ส่งข้อมูลให้ Child ตัวอื่นที่อยู่ใน Parent ตัวเดียวกัน

สำหรับกรณีที่ Child จะส่งข้อมูลให้ Child อื่น ก็จะใช้ Parent เป็นตัวกลางในการส่งข้อมูล เป็นการประยุกต์ในรูปแบบของ Child ส่งข้อมูลให้ Parent

และ Parent ส่งข้อมูลให้ Child อีกตัวที่ได้อธิบายไปก่อนหน้านี้

โดยจะให้ Child ส่งข้อมูลผ่าน Props ในลักษณะ Callback น่ะแหละ

Parent ก็ให้ประกาศ Function เพื่อทำเป็น Callback Function ไว้ แล้วโยนให้ Child ผ่าน Props และต้องกำหนดค่าใน State

เพื่อใช้ส่งข้อมูลให้ Child ตัวที่ 2 ผ่าน Props ด้วย

Children ตัวพี่

Child ตัวที่ 2 ก็เอาค่าจาก Parent ที่ส่งมาผ่าน Props ไปใช้งานตามต้องการ

Children ตัวน้อง

Parent เป็นตัวกลางในการใช้ Function เเละ state

state เพื่อ set data ใน component