Toán tử ba ngôi trong JSX

Như bạn đã biết, bên trong dấu ngoặc nhọn có thể thực thi mã JavaScript. Thực tế mã này không thể là bất kỳ mã nào, mà chỉ là mã đơn giản nhất.

Cụ thể, không thể sử dụng điều kiện if ở đó. Thay vào đó, bạn nên sử dụng các biến thể rút gọn của điều kiện.

Tùy thuộc vào giá trị của hằng số show, hãy hiển thị một hoặc một văn bản khác. Sử dụng toán tử ba ngôi cho việc này:

jsxfunction App() {
  const show = true;
  
  return <div>
    {show ? 'văn bản 1' : 'văn bản 2'}
  </div>;
}

Có thể làm việc không chỉ với văn bản, mà còn với các thẻ:

jsxfunction App() {
  const show = true;
  
  return <div>
    {show ? <p>văn bản 1</p> : <p>văn bản 2</p>}
  </div>;
}

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