คำแนะนำในการส่งผ่านค่าระหว่างส่วนประกอบต่างๆ ใน React: เคล็ดลับเพื่อให้ได้ผลลัพธ์ที่เหมาะสมที่สุด

เผยแพร่ซ้ำโดยเพลโต

ผู้ติดตาม: 0

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

1. ใช้อุปกรณ์ประกอบฉาก

อุปกรณ์ประกอบฉากเป็นวิธีที่พบได้บ่อยที่สุดในการส่งผ่านค่าระหว่างส่วนประกอบต่างๆ ใน React อุปกรณ์ประกอบฉากนั้นย่อมาจากคุณสมบัติ และใช้เพื่อส่งผ่านข้อมูลจากส่วนประกอบหนึ่งไปยังอีกส่วนประกอบหนึ่ง อุปกรณ์ประกอบฉากเป็นวัตถุธรรมดาที่มีคู่ของคีย์-ค่า คีย์แสดงถึงชื่อของเสา และค่าแสดงถึงข้อมูลที่กำลังส่งผ่าน

หากต้องการส่งผ่านพร็อพจากคอมโพเนนต์พาเรนต์ไปยังคอมโพเนนต์ลูก คุณเพียงแค่เพิ่มมันเป็นแอตทริบิวต์ให้กับคอมโพเนนต์ลูกในวิธีการเรนเดอร์ของคอมโพเนนต์พาเรนต์ ตัวอย่างเช่น:

ฟังก์ชันผู้ปกครอง () {

ผลตอบแทน (

);

}

ฟังก์ชัน เด็ก(อุปกรณ์ประกอบฉาก) {

ผลตอบแทน (

ชื่อ: {props.name}

อายุ: {props.age}

);

}

ในตัวอย่างนี้ เรากำลังส่งอุปกรณ์ประกอบฉากสองรายการ ชื่อและอายุ จากองค์ประกอบหลักไปยังองค์ประกอบย่อย องค์ประกอบลูกได้รับอุปกรณ์ประกอบฉากเหล่านี้เป็นวัตถุที่เรียกว่าอุปกรณ์ประกอบฉาก

2. ใช้สถานะ

สถานะเป็นอีกวิธีในการส่งผ่านค่าระหว่างส่วนประกอบใน React สถานะเป็นวัตถุที่แสดงถึงสถานะภายในของส่วนประกอบ ใช้เพื่อเก็บข้อมูลที่สามารถเปลี่ยนแปลงได้ตลอดเวลา

ในการส่งผ่านสถานะจากองค์ประกอบหลักไปยังองค์ประกอบย่อย คุณสามารถส่งผ่านเป็นอุปกรณ์ประกอบฉากได้ คอมโพเนนต์ลูกสามารถอัปเดตสถานะได้โดยการเรียกฟังก์ชันที่ส่งผ่านลงมาเป็นอุปกรณ์ประกอบฉาก

ตัวอย่างเช่น:

ฟังก์ชันผู้ปกครอง () {

const [นับ setCount] = useState (0);

ผลตอบแทน (

);

}

ฟังก์ชัน เด็ก(อุปกรณ์ประกอบฉาก) {

ฟังก์ชันจับคลิก () {

props.setCount(อุปกรณ์ประกอบฉาก + 1);

}

ผลตอบแทน (

จำนวน: {props.count}

);

}

ในตัวอย่างนี้ เรากำลังส่งสถานะการนับและฟังก์ชัน setCount จากองค์ประกอบหลักไปยังองค์ประกอบย่อยเป็นอุปกรณ์ประกอบฉาก คอมโพเนนต์ย่อยสามารถอัปเดตสถานะการนับได้โดยการเรียกใช้ฟังก์ชัน setCount

3. ใช้บริบท

บริบทเป็นวิธีการส่งผ่านค่าระหว่างคอมโพเนนต์โดยไม่ต้องส่งผ่านทุกระดับของโครงสร้างคอมโพเนนต์ บริบทให้วิธีการแบ่งปันข้อมูลระหว่างส่วนประกอบที่ไม่เกี่ยวข้องโดยตรง

ในการใช้บริบท ก่อนอื่นคุณต้องสร้างวัตถุบริบทโดยใช้ฟังก์ชัน createContext จากนั้นคุณสามารถใช้คอมโพเนนต์ผู้ให้บริการเพื่อจัดเตรียมบริบทให้กับคอมโพเนนต์ลูก

ตัวอย่างเช่น:

const CountContext = createContext();

ฟังก์ชันผู้ปกครอง () {

const [นับ setCount] = useState (0);

ผลตอบแทน (

);

}

ฟังก์ชั่น เด็ก () {

const { จำนวน setCount } = useContext (CountContext);

ฟังก์ชันจับคลิก () {

setCount(นับ + 1);

}

ผลตอบแทน (

จำนวน: {จำนวน}

);

}

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

โดยสรุป การส่งผ่านค่าระหว่างส่วนประกอบต่างๆ ใน React เป็นส่วนสำคัญในการสร้างแอปพลิเคชันที่ซับซ้อน ด้วยการใช้อุปกรณ์ประกอบฉาก สถานะ และบริบท คุณสามารถส่งผ่านค่าระหว่างส่วนประกอบด้วยวิธีที่มีประสิทธิภาพและจัดการได้ง่าย ด้วยเคล็ดลับเหล่านี้ คุณจะมั่นใจได้ถึงผลลัพธ์ที่ดีที่สุดเมื่อส่งค่าระหว่างส่วนประกอบต่างๆ ใน React