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 traisLoggedIn
. NếuisLoggedIn
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.