Quartz 🪬

Conditional Rendering

2 min read

Trong React, chúng ta có thể dùng các câu lệnh điều kiện, các toán tử luận lý hoặc toán tử ba ngôi để render ra các component dựa trên một điều kiện cho trước nào đó.

Trong ví dụ dưới đây dùng các câu lệnh điều kiện để xử lý hai trường hợp:

  • Nếu như người dùng đã đăng nhập thì render ra dòng chữ “You are logged in”.
  • Nếu chưa đăng nhập thì hiện nút “Log in”.
function User({ isLoggedIn }) {
  return isLoggedIn ? <h1>You are logged in</h1> : <button>Log in</button>
}

Có thể dùng toán tử ba ngôi:

function User({ isLoggedIn }) {
  return isLoggedIn ? <h1>You are logged in</h1> : <button>Log in</button>
}

Hoặc dùng toán tử &&:

function User({ isLoggedIn }) {
  return this.state.isLoggedIn && <h1>You are logged in</h1>
}

React xem giá trị false tương tự như null và undefined nên nó sẽ không render ra.

Note

Không nên đặt dữ liệu số ở vế trái của toán tử && bởi vì nếu giá trị là 0 thì React sẽ render ra số 0.

Chúng ta cũng có thể render ra một JSX element và thay đổi nội dung của nó dựa trên điều kiện cụ thể:

function Item({ name, isPacked }) {
  let itemContent = name
  if (isPacked) {
    itemContent = <del>{name + " ✔"}</del>
  }
  return <li>{itemContent}</li>
}

Resources