- ทำความเข้าใจเกี่ยวกับการแสดงผลตามเงื่อนไข (Conditional Rendering)
- เทคนิคต่างๆ ของการแสดงผลตามเงื่อนไข
2.1 คำสั่ง If/Else
2.2 ตัวแปรองค์ประกอบ (Element Variables)
2.3 ตัวดำเนินการเงื่อนไขแบบไตรภาค (Ternary Conditional Operator)
2.4 ตรรกะ (Logical) AND ตัวดำเนินการ (Operator) (&&)
2.5 ผู้ประกอบการการรวมตัวกันเป็นโมฆะ (??) (Nullish Coalescing Operator)
2.6 ตัวดำเนินการผูกมัดเสริม (?) (Optional Chaining Operator)
2.7 คำสั่ง Switch Case
การทำเว็บ ReactJS และทำแอพ ซึ่งเป็นไลบรารี JavaScript ยอดนิยม ได้กลายเป็นวิธีแก้ปัญหาสำหรับนักพัฒนาจำนวนมาก ช่วยให้สามารถสร้างส่วนติดต่อผู้ใช้แบบโต้ตอบและไดนามิกได้ง่าย หนึ่งในคุณสมบัติที่ทรงพลังของมันคือความสามารถในการใช้การแสดงผลตามเงื่อนไข ซึ่งเป็นส่วนประกอบที่สำคัญสำหรับการทำเว็บ ReactJS และทำแอพที่ตอบสนองและโต้ตอบได้
1. ทำความเข้าใจเกี่ยวกับการแสดงผลตามเงื่อนไข (Conditional Rendering)
ก่อนที่เราจะเจาะลึกถึงหัวใจของการเรนเดอร์แบบมีเงื่อนไข เรามาดูภาพรวมคร่าวๆ ของจุดประสงค์กันก่อน ในรูปแบบพื้นฐานที่สุด การแสดงเงื่อนไขใน ReactJS หมายถึงความสามารถของส่วนประกอบในการตัดสินใจว่าจะแสดงองค์ประกอบใดตามเงื่อนไขที่กำหนด นี่อาจเป็นสถานะของส่วนประกอบ อุปกรณ์ประกอบฉากที่ส่งผ่านเข้าไป หรือตรรกะอื่นใดที่ฝังอยู่ภายในส่วนประกอบ
เหตุใดการเรนเดอร์แบบมีเงื่อนไขจึงมีความสำคัญในการทำเว็บ ReactJS และทำแอพ พูดง่ายๆ คือทำให้อินเทอร์เฟซผู้ใช้มีชีวิตชีวา อนุญาตให้มีการเปลี่ยนแปลงแบบไดนามิกใน UI ตามการโต้ตอบของผู้ใช้ สถานะของระบบ หรือตัวแปรอื่นๆ ตัวอย่างเช่น ข้อความต้อนรับอาจเปลี่ยนแปลงโดยขึ้นอยู่กับว่าผู้ใช้เข้าสู่ระบบหรือไม่ แบบฟอร์มอาจแสดงข้อความแสดงความสำเร็จหลังจากส่งสำเร็จหรือแสดงข้อความแสดงข้อผิดพลาดหากมีข้อผิดพลาดเกิดขึ้น
2. เทคนิคต่างๆ ของการแสดงผลตามเงื่อนไข
ReactJS มีหลายวิธีในการนำการแสดงผลตามเงื่อนไขไปใช้ แต่ละเทคนิคมีจุดแข็ง และตัวเลือกของคุณควรขึ้นอยู่กับข้อกำหนดเฉพาะในสถานการณ์ของคุณ ลองสำรวจเทคนิคเหล่านี้
2.1 คำสั่ง If/Else
คำสั่ง JavaScript พื้นฐานif/else เป็นวิธีที่ตรงไปตรงมาที่สุดเพื่อให้ได้การแสดงผลตามเงื่อนไข อย่างไรก็ตาม เนื่องจาก JSX ไม่ใช่แค่ JavaScript ล้วนๆ คุณจึงไม่สามารถแทรก if/else คำสั่งเข้าไปข้างในได้โดยตรง คุณสามารถใช้ if/else คำสั่งที่อยู่นอกคำสั่ง return ของเมธอดการเรนเดอร์ของคอมโพเนนต์ แทน
render() {
const isLoggedIn = this.state.isLoggedIn;
if (isLoggedIn) {
return <h1>Welcome back!</h1>;
} else {
return <h1>Please sign up.</h1>;
}
}ในตัวอย่างข้างต้น วิธีการเรนเดอร์จะตรวจสอบisLoggedInสถานะ ก่อน ขึ้นอยู่กับว่าเป็นtrueหรือfalseมันจะส่งคืนองค์ประกอบ JSX ที่แตกต่างกัน
2.2 ตัวแปรองค์ประกอบ (Element Variables)
ในบางสถานการณ์ คุณอาจต้องแสดงนิพจน์ JSX มากเกินไปหรือใหญ่เกินไปแบบมีเงื่อนไข ในกรณีนี้ การใช้ตัวแปรองค์ประกอบอาจเป็นทางเลือกที่ดีกว่า ด้วยตัวแปรองค์ประกอบ คุณสามารถกำหนดนิพจน์ JSX ให้กับตัวแปรตามเงื่อนไขของคุณและส่งคืนตัวแปรนั้นในวิธีการเรนเดอร์ของคุณ
render() {
const isLoggedIn = this.state.isLoggedIn;
let message;
if (isLoggedIn) {
message = <h1>Welcome back!</h1>;
} else {
message = <h1>Please sign up.</h1>;
}
return <div>{message}</div>;
}วิธีการนี้ช่วยให้โค้ดของคุณสะอาดขึ้นและอ่านง่ายขึ้น โดยเฉพาะอย่างยิ่งเมื่อนิพจน์ JSX ของคุณเริ่มซับซ้อนมากขึ้น
2.3 ตัวดำเนินการเงื่อนไขแบบไตรภาค (Ternary Conditional Operator)
โอเปอเรเตอร์ ternary ของ JavaScript หรือที่เรียกว่าโอเปอเรเตอร์เงื่อนไข ช่วยให้คุณลดความซับซ้อนของif/elseคำสั่งได้ สิ่งนี้มีประโยชน์อย่างยิ่งในรหัส JSX ของคุณ
render() {
const isLoggedIn = this.state.isLoggedIn;
return (
<div>
{isLoggedIn ? (
<h1>Welcome back!</h1>
) : (
<h1>Please sign up.</h1>
)}
</div>
);
}ในตัวอย่างนี้ เราใช้ตัวดำเนินการ ternary ภายในโค้ด JSX ถ้าisLoggedInเป็น มันtrueจะแสดงผล<h1>องค์ประกอบ แรก มิฉะนั้นจะทำให้อันที่สอง
2.4 ตรรกะ (Logical) AND ตัวดำเนินการ (Operator) (&&)
ตัวดำเนิน การเชิงตรรกะ AND ( &&) เป็นอีกวิธีหนึ่งในการบรรลุการแสดงผลตามเงื่อนไขใน React วิธีการนี้ใช้ดีที่สุดเมื่อคุณต้องการให้บางสิ่งแสดงผลตามเงื่อนไขที่กำหนด และไม่ต้องแสดงผลอะไรหากไม่ตรงตามเงื่อนไข
render() {
const isLoggedIn = this.state.isLoggedIn;
return (
<div>
{isLoggedIn && <h1>Welcome back!</h1>}
</div>
);
}ในตัวอย่างด้านบน if isLoggedInis trueองค์ประกอบ<h1>จะถูกแสดง อย่างไรก็ตาม หากเป็นเช่นนั้นfalseจะไม่มีการเรนเดอร์อะไรเลย
เป็นที่น่าสังเกตว่า JavaScript ส่งคืนค่าเท็จแรกในการดำเนินการเชิงตรรกะและ ในกรณีของเรา if isLoggedInis falseจะเป็นค่าเท็จค่าแรกและค่าเดียว ดังนั้นfalseจะถูกส่งกลับ จากนั้น React จะละเว้นfalseค่านี้ระหว่างการเรนเดอร์ ดังนั้นจึงไม่แสดงอะไรเลย
2.5 ผู้ประกอบการการรวมตัวกันเป็นโมฆะ (??) (Nullish Coalescing Operator)
React อนุญาตให้แสดงผลตามเงื่อนไขโดยใช้ Nullish Coalescing Operator ( ??) ตัวดำเนินการนี้ส่งคืนอาร์กิวเมนต์แรกหากไม่เป็นโมฆะหรือไม่ได้กำหนด มิฉะนั้นจะส่งกลับอาร์กิวเมนต์ที่สอง
render() {
const user = this.state.user;
return (
<div>
<h1>{user.name ?? 'Guest'}</h1>
</div>
);
}ในตัวอย่างด้านบน ถ้า user.name ไม่ใช่ null หรือ undefined จะแสดง มิฉะนั้น'Guest'จะแสดง
2.6 ตัวดำเนินการผูกมัดเสริม (?) (Optional Chaining Operator)
ตัวดำเนินการที่มีประโยชน์อีกตัวใน React คือตัวดำเนินการผูกมัดเพิ่มเติม ( ?.) ช่วยให้คุณเข้าถึงคุณสมบัติของวัตถุที่ซ้อนกันลึกโดยไม่ต้องกังวลว่าการอ้างอิงแต่ละรายการในห่วงโซ่นั้นถูกต้องหรือไม่
render() {
const user = this.state.user;
return (
<div>
<h1>{user?.name || 'Guest'}</h1>
</div>
);
}ในตัวอย่างด้านบน if useris nullหรือundefinedจะส่งกลับทันทีundefinedและ ‘Guest’ จะแสดงผลแทนการโยนข้อผิดพลาด
2.7 คำสั่ง Switch Case
นอกจากนี้ยังสามารถใช้คำสั่ง Switch case สำหรับการแสดงผลตามเงื่อนไข โดยเฉพาะอย่างยิ่งเมื่อต้องจัดการกับหลายเงื่อนไข วิธีการนี้มีประโยชน์ ตัวอย่างเช่น เมื่อคุณมีสถานะ UI ที่แตกต่างกันหลายสถานะ โดยขึ้นอยู่กับองค์ประกอบหรือตัวแปรสถานะเดียว
render() {
const { userStatus } = this.state;
let message;
switch (userStatus) {
case 'loggedIn':
message = <h1>Welcome back!</h1>;
break;
case 'loggedOut':
message = <h1>Please sign up.</h1>;
break;
default:
message = <h1>Hello, guest!</h1>;
break;
}
return <div>{message}</div>;
}เมื่อทำเว็บ ReactJS และทำแอพ การแสดงผลตามเงื่อนไขเป็นเครื่องมือที่มีประสิทธิภาพในคลังแสงของคุณ ช่วยให้อินเทอร์เฟซผู้ใช้ของคุณเป็นไดนามิกและตอบสนอง ปรับแต่งเองตามสถานะของแอปพลิเคชันหรือการโต้ตอบของผู้ใช้
การเรนเดอร์แบบมีเงื่อนไขใน React อาจดูน่ากลัวในตอนแรก โดยเฉพาะอย่างยิ่งเมื่อมีหลายวิธีให้เลือก แต่เมื่อคุณเจาะลึกลงไปถึงการทำเว็บ ReactJS และทำแอพ วิธีการเหล่านี้จะเริ่มเข้าท่าในสถานการณ์ต่างๆ และจะชัดเจนขึ้นว่าเมื่อใดควรใช้วิธีใด
โปรดจำไว้ว่า ReactJS เป็นเรื่องเกี่ยวกับส่วนประกอบและการนำกลับมาใช้ใหม่ได้ คุณควรพยายามสร้างคอมโพเนนต์ขนาดเล็กที่ใช้ซ้ำได้ซึ่งจัดการตรรกะการเรนเดอร์ของตัวเอง แนวทางปฏิบัตินี้จะช่วยให้เข้าใจและดีบักการแสดงผลตามเงื่อนไขได้ง่ายขึ้นเมื่อแอปพลิเคชันของคุณมีความซับซ้อนมากขึ้น