0Pricing
React Academy · บทเรียน

การตรวจสอบโครงสร้างคอมโพเนนต์และพร็อพส์

เจาะดูโครงสร้างลำดับชั้นของคอมโพเนนต์และอ่านค่าพร็อพส์กับสถานะปัจจุบัน

การตรวจสอบโครงสร้างคอมโพเนนต์และพร็อพส์ เป็นบทเรียน React Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน React Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส React Academy มีบทเรียนทั้งหมด 4 บทเรียน

ยินดีต้อนรับ

ในบทเรียนนี้ คุณจะได้เรียนรู้การเจาะลึกเข้าไปในลำดับชั้นคอมโพเนนต์ที่ซ้อนกันใน React DevTools และอ่านค่าพร็อพและสถานะที่ซับซ้อนจากแถบด้านข้างของแผงคอมโพเนนต์

โครงสร้างต้นไม้คอมโพเนนต์คือกระจกสะท้อน

คอมโพเนนต์ทุกตัวที่คุณเห็นใน DevTools สะท้อนการซ้อนกันของ JSX โดยปกติรากของโครงสร้างคืือคอมโพเนนต์ App คอมโพเนนต์ลูกจะเยื้องอยู่ใต้คอมโพเนนต์แม่ ตรงตามที่ปรากฏในซอร์สโค้ด

การเลือกคอมโพเนนต์

คลิกชื่อคอมโพเนนต์ใดก็ได้ในโครงสร้างต้นไม้ แผงด้านขวาจะแสดงพร็อพ ฮุก (สถานะ เอฟเฟกต์ รีฟ) รวมถึงไฟล์ต้นฉบับและหมายเลขบรรทัดที่คอมโพเนนต์นั้นถูกกำหนดไว้ทันที

การอ่านพร็อพชนิดสตริงและตัวเลข

พร็อพชนิดสตริงจะแสดงอยู่ในเครื่องหมายอัญประกาศ: `"hello"` ตัวเลขจะแสดงโดยไม่มีเครื่องหมายอัญประกาศ: `42` ค่าบูลีนจะแสดงเป็น `true` หรือ `false` คุณสามารถเลื่อนเมาส์ไปเหนือค่าเพื่อดูเนื้อหาทั้งหมดได้หากค่าถูกตัดให้สั้นลง

การขยายพร็อพชนิดออบเจ็กต์และอาร์เรย์

เมื่อค่าพร็อพเป็นออบเจ็กต์หรืออาร์เรย์ DevTools จะแสดงโครงสร้างต้นไม้ที่ยุบหรือขยายได้ คลิกลูกศรถัดจาก `{…}` หรือ `[…]` เพื่อขยายและดูคีย์กับค่าที่ซ้อนกันทั้งหมด

การตรวจสอบพร็อพชนิดฟังก์ชัน

พร็อพชนิดฟังก์ชัน (เช่น ตัวจัดการ `onClick`) จะแสดงเป็น `f onClick()` คุณสามารถคลิกไอคอนลูกศรขนาดเล็กที่อยู่ถัดจากพร็อพเพื่อไปยังคำจำกัดความของฟังก์ชันในแผงแหล่งที่มา

การกรองโครงสร้างต้นไม้

ใช้ช่องค้นหาที่ด้านบนของแผงคอมโพเนนต์เพื่อกรองตามชื่อ พิมพ์ `Button` เพื่อแสดงเฉพาะคอมโพเนนต์ที่มีชื่อประกอบด้วย *Button* วิธีนี้มีประโยชน์ในแอปที่มีคอมโพเนนต์หลายร้อยตัว

การข้ามจาก DOM ไปยัง React

ในแท็บ **องค์ประกอบ** ให้คลิกขวาที่โหนด DOM แล้วเลือก **ตรวจสอบคอมโพเนนต์ React** (ใช้งานได้เมื่อติดตั้ง DevTools แล้ว) DevTools จะสลับไปยังแท็บคอมโพเนนต์และเลือกคอมโพเนนต์ React ที่ใช้ render โหนดนั้น

การแก้ไขพร็อพใน DevTools

ดับเบิลคลิกค่าพร็อพใน DevTools เพื่อแก้ไขแบบเรียลไทม์ คอมโพเนนต์จะ render ซ้ำทันทีด้วยค่าใหม่ วิธีนี้มีประโยชน์สำหรับการทดสอบกรณีขอบโดยไม่ต้องเปลี่ยนซอร์สโค้ด

การคัดลอกพร็อพเป็น JSON

คลิกขวาที่ค่าพร็อพหรือสถานะใดก็ได้ใน DevTools แล้วเลือก **คัดลอกค่า** ระบบจะคัดลอกค่าเป็น JSON ไปยังคลิปบอร์ดของคุณ ซึ่งสะดวกสำหรับการวางลงในการทดสอบหรือเอกสารประกอบ

ตรวจสอบความเข้าใจ

คุณจะขยายพร็อพชนิดออบเจ็กต์หรืออาร์เรย์ในแผงคอมโพเนนต์ของ React DevTools ได้อย่างไร

ทบทวน

ตอนนี้คุณสามารถนำทางในโครงสร้างต้นไม้คอมโพเนนต์ อ่านสตริง ตัวเลข ออบเจ็กต์ และฟังก์ชัน กรองตามชื่อ ข้ามจากองค์ประกอบ DOM ไปยังคอมโพเนนต์ React และแก้ไขพร็อพแบบเรียลไทม์ใน DevTools ได้แล้ว

บทถัดไป

บทเรียนถัดไป: **การใช้แท็บตัววิเคราะห์ประสิทธิภาพ** — คุณจะบันทึกการ render อ่านกราฟเปลวไฟ และระบุคอมโพเนนต์ที่ทำให้การโต้ตอบช้า

คำถามที่พบบ่อย

บทเรียน “การตรวจสอบโครงสร้างคอมโพเนนต์และพร็อพส์” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การตรวจสอบโครงสร้างคอมโพเนนต์และพร็อพส์” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส React Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส React Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การตรวจสอบโครงสร้างคอมโพเนนต์และพร็อพส์”

เจาะดูโครงสร้างลำดับชั้นของคอมโพเนนต์และอ่านค่าพร็อพส์กับสถานะปัจจุบัน คุณปฏิบัติ React Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน React Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน React Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน

บทเรียน “การตรวจสอบโครงสร้างคอมโพเนนต์และพร็อพส์” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน React Academy นี้ได้ไหม

ได้ บทเรียน React Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. การติดตั้งและเปิด React DevTools
  2. การตรวจสอบโครงสร้างคอมโพเนนต์และพร็อพส์
  3. การใช้แท็บ Profiler
  4. การแก้ไขข้อผิดพลาด React ที่พบบ่อย
← กลับไปที่ React Academy