ตัวดำเนินการเงื่อนไขใน JSX

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

โดยเฉพาะอย่างยิ่ง เราไม่สามารถใช้เงื่อนไข if ในนั้นได้ แทนที่ควรใช้รูปแบบเงื่อนไขแบบย่อ

ลองแสดงข้อความหนึ่งหรืออีกข้อความหนึ่ง ขึ้นอยู่กับค่าของค่าคงที่ show โดยใช้ ตัวดำเนินการเงื่อนไข:

jsxfunction App() {
  const show = true;
  
  return <div>
    {show ? 'text1' : 'text2'}
  </div>;
}

สามารถทำงานได้ไม่เพียงแค่กับข้อความ แต่ยังรวมถึง กับแท็กด้วย:

jsxfunction App() {
  const show = true;
  
  return <div>
    {show ? <p>text1</p> : <p>text2</p>}
  </div>;
}

jsxfunction App() {
  const age = 19;
  
  return <div>
    
  </div>;
}