Điều kiện Rendering trong react

Trong React, chúng ta có thể tạo nhiều component đóng gói hành vi mà chúng ta cần. Sau đó, chúng tôi có thể render chúng tùy thuộc vào một số điều kiện hoặc trạng thái ứng dụng của chúng tôi. Nói cách khác, dựa trên một hoặc một số điều kiện, một component quyết định nó sẽ trả về những phần tử nào. Trong React, kết xuất có điều kiện hoạt động giống như các điều kiện hoạt động trong JavaScript. Chúng tôi sử dụng các toán tử JavaScript để tạo các phần tử đại diện cho trạng thái hiện tại, sau đó component React cập nhật giao diện người dùng để khớp với chúng.

Từ kịch bản đã cho, chúng ta có thể hiểu cách kết xuất có điều kiện hoạt động. Hãy xem xét một ví dụ về xử lý nút đăng nhập / đăng xuất. Các nút đăng nhập và đăng xuất sẽ là các component riêng biệt. Nếu người dùng đã đăng nhập, hãy kết xuất component đăng xuất để hiển thị nút đăng xuất. Nếu người dùng chưa đăng nhập, hãy kết xuất component đăng nhập để hiển thị nút đăng nhập. Trong React, tình huống này được gọi là kết xuất có điều kiện.

Có nhiều cách để thực hiện render có điều kiện trong React. Chúng được đưa ra dưới đây.

If

Đây là cách dễ nhất để hiển thị có điều kiện trong React trong phương thức kết xuất. Nó bị hạn chế đối với tổng khối của component. NẾU điều kiện là đúng, nó sẽ trả về phần tử được hiển thị. Nó có thể được hiểu trong ví dụ dưới đây.

Ví dụ

function UserLoggin(props) {  
  return <h1>Welcome back!</h1>;  
}  
function GuestLoggin(props) {  
  return <h1>Please sign up.</h1>;  
}  
function SignUp(props) {  
  const isLoggedIn = props.isLoggedIn;  
  if (isLoggedIn) {  
    return <UserLogin />;  
  }  
  return <GuestLogin />;  
}  
  
ReactDOM.render(  
  <SignUp isLoggedIn={false} />,  
  document.getElementById('root')  
);  

Toán tử logic &&

Toán tử này được sử dụng để kiểm tra điều kiện. Nếu điều kiện đúng, nó sẽ trả về phần tử ngay sau &&, còn nếu sai, React sẽ bỏ qua và bỏ qua nó.

Cú pháp

{  
    condition &&  
    // whatever written after && will be a part of output.  
}  

Chúng ta có thể hiểu hành vi của khái niệm này từ ví dụ dưới đây.

Nếu bạn chạy đoạn mã dưới đây, bạn sẽ không thấy thông báo cảnh báo vì điều kiện không khớp.

('testreact' == 'testreact') && alert('Cảnh báo này sẽ không bao giờ được hiển thị!')  

Nếu bạn chạy đoạn mã dưới đây, bạn sẽ thấy thông báo cảnh báo vì điều kiện đang khớp.

(6 > 5) && alert ('Cảnh báo này sẽ được hiển thị!')

Ví dụ

import React from 'react';   
import ReactDOM from 'react-dom';   
// Example Component   
function Example()   
{   
    return(<div>   
            {   
                (10 > 5) && alert('This alert will be shown!')  
            }   
           </div>   
        );   
}   

Bạn có thể thấy trong kết quả ở trên rằng khi điều kiện (10> 5) đánh giá là true, thông báo cảnh báo được hiển thị thành công trên màn hình.

Toán tử bậc ba

Toán tử bậc ba được sử dụng trong trường hợp hai khối thay thế nhau với một điều kiện nhất định. Toán tử này làm cho câu lệnh if-else của bạn ngắn gọn hơn. Nó có ba toán hạng và được sử dụng như một phím tắt cho câu lệnh if.

Cú pháp

condition ?  true : false  

Nếu điều kiện là đúng, statement1 sẽ được hiển thị. Nếu không, false sẽ được hiển thị.

Ví dụ

render() {  
  const isLoggedIn = this.state.isLoggedIn;  
  return (  
    <div>  
      Welcome {isLoggedIn ? 'Back' : 'Please login first'}.  
    </div>  
  );  
}  

Switch case

Đôi khi có thể có nhiều kết xuất có điều kiện. Trong trường hợp chuyển đổi, hiển thị có điều kiện được áp dụng dựa trên một trạng thái khác.

Ví dụ

function NotificationMsg({ text}) {  
  switch(text) {  
    case 'Hi All':  
      return <Message: text={text} />;  
    case 'Hello React':  
      return <Message text={text} />;  
    default:  
      return null;  
  }  
}  

Render có điều kiện với enums

Một enum là một cách tuyệt vời để có nhiều kết xuất có điều kiện. Nó dễ đọc hơn so với toán tử trường hợp chuyển mạch. Nó là hoàn hảo để ánh xạ giữa các trạng thái khác nhau. Nó cũng hoàn hảo để lập bản đồ trong nhiều điều kiện. Nó có thể được hiểu trong ví dụ dưới đây.

Ví dụ

function NotificationMsg({ text, state }) {  
  return (  
    <div>  
      {{  
        info: <Message text={text} />,  
        warning: <Message text={text} />,  
      }[state]}  
    </div>  
  );  
}  

Chặn Component form Rendering

Đôi khi có thể xảy ra trường hợp một component tự ẩn đi mặc dù một component khác đã hiển thị nó. Để làm điều này (ngăn một component render), chúng ta sẽ phải trả về null thay vì kết xuất kết xuất của nó. Nó có thể được hiểu trong ví dụ dưới đây:

Ví dụ

Trong ví dụ này, giá trị được hiển thị dựa trên giá trị của phần mềm hỗ trợ được gọi là displayMessage. Nếu giá trị prop là false, thì component sẽ không hiển thị.

import React from 'react';   
import ReactDOM from 'react-dom';   
function Show(props)   
{   
    if(!props.displayMessage)   
        return null;   
    else  
        return <h3>Component is rendered</h3>;   
}   
ReactDOM.render(   
    <div>   
        <h1>Message</h1>  
        <Show displayMessage = {true} />    
    </div>,    
    document.getElementById('app')   
);