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.