ช่องทำเครื่องหมายและการเรนเดอร์แบบมีเงื่อนไขใน React

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

jsxfunction App() {
  const [checked, setChecked] = useState(true);
  
  let message;
  if (checked) {
    message = <p>ข้อความ 1</p>;
  } else {
    message = <p>ข้อความ 2</p>;
  }
  
  return <div>
    <input type="checkbox" checked={checked} onChange={() => setChecked(!checked)} />
    <div>{message}</div>
  </div>;
}

jsx<div>
  <h2>เย่ คุณอายุ 18 ปีแล้ว</h2>
  <p>
    ที่นี่คือเนื้อหาสำหรับผู้ใหญ่เท่านั้น
  </p>
</div>

jsx<div>
  <p>
    อนิจจา คุณยังไม่อายุ 18 ปี:(
  </p>
</div>