14. Cấu trúc switch trong React JS

Trong React JS, bạn cũng có thể sử dụng cấu trúc switch để thực hiện điều kiện nhiều lựa chọn khác nhau dựa trên giá trị của một biểu thức. Tuy nhiên, khi làm việc với JSX, việc sử dụng cấu trúc switch trực tiếp không được khuyến nghị. Thay vào đó, bạn nên sử dụng cách khác để thực hiện điều kiện đa lựa chọn trong JSX.

Một cách thông thường là sử dụng các biểu thức điều kiện hoặc cấu trúc if/else để thay thế cho cấu trúc switch.

Dưới đây là ví dụ về cách thực hiện điều kiện đa lựa chọn trong React bằng cách sử dụng biểu thức điều kiện:

jsx

import React from 'react';

function SwitchExample(props) {
  const value = props.value;

  return (
    <div>
      {value === 'A' ? <p>Option A selected</p> : null}
      {value === 'B' ? <p>Option B selected</p> : null}
      {value === 'C' ? <p>Option C selected</p> : null}
      {value === 'D' ? <p>Option D selected</p> : null}
    </div>
  );
}

export default SwitchExample;

Trong ví dụ này, chúng ta kiểm tra giá trị của value và hiển thị thông điệp tương ứng khi các điều kiện đúng. Bạn có thể thay thế null bằng bất kỳ thứ gì bạn muốn hiển thị hoặc để trống để không có hiển thị nào.

Ví dụ sử dụng trong ứng dụng:

jsx

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

function App() {
  return (
    <div>
      <h1>Switch Example</h1>
      <SwitchExample value="B" />
    </div>
  );
}

export default App;

Trong ví dụ này, SwitchExample sẽ hiển thị “Option B selected” vì giá trị value là “B”.

Mặc dù cấu trúc switch không phải là lựa chọn phổ biến trong React JSX, bạn vẫn có thể thực hiện điều kiện đa lựa chọn bằng cách sử dụng cú pháp JSX và các biểu thức điều kiện. Trên đây là giới thiệu về Cấu trúc switch trong React JS.