React Conditional Rendering

Trong React, chúng ta có thể render các component dựa vào điều kiện.

Có một số cách để làm việc này là sử dụng câu lệnh if, sử dụng toán tử &&, sử dụng ternary operator.

Câu lệnh if

Chúng ta có thể sử dụng câu lệnh if của JavaScript để quyết định xem component nào sẽ được render.

Trong ví dụ sau chúng ta sẽ sử dụng hai component này:

Bây giờ, chúng ta sẽ tạo ra một component khác, bên trong component này chúng ta sẽ chọn ra component nào sẽ được render dựa vào một điều kiện:

Thử thay đổi giá trị của thuộc tính isGoal thành true:

Toán tử logic &&

Một cách khác để render một React component dựa vào điều kiện là sử dụng toán tử &&.

Trong ví dụ sau chúng ta có thể nhúng các biểu thức JavaScript trong JSX bằng cách sử dụng cặp dấu ngoặc nhọn:

Nếu như biểu thức cars.length > 0 có giá trị là true, thì biểu thức sau toán tử && sẽ được render.

Thử làm rỗng mảng cars:

Ternary Operator

Một cách khác để render các phần tử dựa vào điều kiện là sử dụng ternary operator.

Chúng ta sẽ quay trở lại ví dụ goal.

Ví dụ sau sẽ trả về MadeGoal component nếu như isGoal là true, nếu không thì trả về MissedGoal component:

Để tìm hiểu thêm, chúng ta hãy xem phần ternary operator.