Phản ứng kết xuất có điều kiện đẹp mắt với<renderwhen> </renderwhen>

Nov 24 2022

Kết xuất có điều kiện là một trong những cách được sử dụng phổ biến nhất trong React. Khi ứng dụng phát triển và mọi thứ trở nên phức tạp, các câu lệnh kết xuất có điều kiện có thể trở nên khó đọc hơn. Trong bài viết này, chúng ta sẽ thảo luận về cách viết các câu điều kiện đẹp mắt trong React một cách dễ dàng.

Kỹ thuật kết xuất có điều kiện phổ biến

Đây là một số kỹ thuật được sử dụng khi áp dụng kết xuất có điều kiện trong các thành phần React:

Sử dụng &&

Đây là một trong những kỹ thuật được sử dụng phổ biến nhất để hiển thị có điều kiện. Điều quan trọng cần nhớ là kỹ thuật này nên được sử dụng rất cẩn thận vì nó có thể dẫn đến các lỗi không thể đoán trước.

Sử dụng câu lệnh If/Else

Một kỹ thuật khác để hiển thị có điều kiện trong React là sử dụng câu lệnh if/else. Nó có thể dẫn đến mã thành phần phức tạp khi có nhiều điều kiện để kiểm tra.

Sử dụng toán tử ternary

Toán tử bậc ba là một kỹ thuật phổ biến được sử dụng để hiển thị có điều kiện trong React. Vấn đề với việc sử dụng toán tử bậc ba là khi bạn có nhiều điều kiện để kiểm tra, dẫn đến việc sử dụng toán tử bậc ba lồng nhau. Nó có thể làm cho mã khó đọc và phức tạp hơn.

Viết câu điều kiện rõ ràng

Giới thiệu , một thành phần React nhỏ và đơn giản cho phép bạn viết các câu điều kiện đẹp mắt trong React. Nó sẽ cho phép bạn viết mã hiển thị có điều kiện có thể đọc được trong React một cách nhanh chóng. Cho dù bạn cần kiểm tra một điều kiện hay một loạt điều kiện, bạn đều có thể làm điều đó với .

Thành phần hoạt động tương tự như câu lệnh if/else và switch/case. Nó cho phép bạn kiểm tra một loạt các điều kiện để hiển thị có điều kiện trong React.

Trong ví dụ trên, mã hiển thị một thông báo dựa trên các ngày trong tuần. Điều kiện cuối cùng luôn đúng, nhưng nó sẽ chỉ hiển thị khi tất cả các điều kiện trên không thành công. Nó hoạt động chính xác như câu lệnh mặc định switch/case .

Thành phần chấp nhận chỗ dựa isTrue , cho phép bạn triển khai các điều kiện lồng nhau. Điều đó có nghĩa là tất cả các điều kiện con sẽ chỉ được kiểm tra nếu điều kiện được thông qua trong đánh giá là đúng.

Kiểm tra thành phần React nhỏ bé này tại đây trên GitHub .

Xây dựng các ứng dụng web có thể kết hợp

Đừng xây dựng web nguyên khối. Sử dụng Bit để tạo và soạn các thành phần phần mềm tách rời — trong các khung yêu thích của bạn như React hoặc Node. Xây dựng các ứng dụng mô-đun và có thể mở rộng với trải nghiệm nhà phát triển mạnh mẽ và thú vị.

Đưa nhóm của bạn đến Bit Cloud để lưu trữ và cộng tác trên các thành phần cùng nhau, đồng thời tăng tốc, mở rộng quy mô và chuẩn hóa quá trình phát triển theo nhóm. Hãy thử giao diện người dùng có thể kết hợp với Hệ thống thiết kế hoặc Giao diện vi mô hoặc khám phá phần phụ trợ có thể kết hợp với các thành phần phía máy chủ .