13. Cấu trúc If trong React JS

Trong React JS, bạn có thể sử dụng các cấu trúc điều kiện để điều chỉnh việc hiển thị phần của giao diện dựa trên điều kiện logic. Một cách thông thường để thực hiện điều này là sử dụng cú pháp JSX và các biểu thức JavaScript.

Dưới đây là một ví dụ về cách sử dụng cấu trúc điều kiện trong React:

jsx

import React from 'react';

function ConditionalRenderingExample(props) {
  const isLoggedIn = props.isLoggedIn;

  return (
    <div>
      {isLoggedIn ? <p>Welcome, User!</p> : <p>Please log in</p>}
    </div>
  );
}

export default ConditionalRenderingExample;

Trong ví dụ này:

• Chúng ta nhận một prop isLoggedIn từ thành phần cha.
• Sử dụng cấu trúc {condition ? trueValue : falseValue} để kiểm tra isLoggedIn. Nếu isLoggedIn là true, <p>Welcome, User!</p> sẽ được hiển thị; nếu không, <p>Please log in</p> sẽ được hiển thị.

Ví dụ cụ thể trong ứng dụng:

jsx

import React from 'react';
import ConditionalRenderingExample from './ConditionalRenderingExample';

function App() {
  return (
    <div>
      <h1>Conditional Rendering Example</h1>
      <ConditionalRenderingExample isLoggedIn={true} />
    </div>
  );
}

export default App;

Trong ứng dụng này, ConditionalRenderingExample sẽ hiển thị “Welcome, User!” vì chúng ta truyền prop isLoggedIn với giá trị true.

Bạn cũng có thể sử dụng các cấu trúc điều kiện thông qua biểu thức JavaScript bên ngoài JSX, ví dụ:

jsx

import React from 'react';

function ConditionalRenderingExample(props) {
  const isLoggedIn = props.isLoggedIn;

  let content;
  if (isLoggedIn) {
    content = <p>Welcome, User!</p>;
  } else {
    content = <p>Please log in</p>;
  }

  return <div>{content}</div>;
}

export default ConditionalRenderingExample;

Dù bạn sử dụng cách nào, cấu trúc điều kiện trong React giúp bạn điều chỉnh cách hiển thị phần của giao diện dựa trên trạng thái hay dữ liệu đầu vào. Trên đây tôi vừa giới thiệu Cấu trúc If trong React JS.