Cách triển khai kết xuất có điều kiện trong React.js (Với các ví dụ)
Kết xuất có điều kiện đề cập đến việc thay đổi hành vi của ứng dụng tùy thuộc vào trạng thái của ứng dụng đó. Ví dụ: bạn có thể thay đổi thông báo chào mừng của ứng dụng React thành bóng tối trong đêm. Bằng cách này, bạn có một thông báo hiển thị khác nhau tùy thuộc vào thời gian trong ngày.
Kết xuất có điều kiện cho phép bạn kết xuất các thành phần hoặc phần tử React khác nhau nếu một điều kiện được đáp ứng. Trong hướng dẫn này, bạn sẽ tìm hiểu về các cách khác nhau mà bạn có thể sử dụng kết xuất có điều kiện trong các ứng dụng React.js.
Mục Lục
Các cách bạn có thể triển khai kết xuất có điều kiện
Để làm theo những ví dụ này, bạn cần có hiểu biết cơ bản về cách hoạt động của React. Nếu bạn đang gặp khó khăn trong trường hợp đó, đừng lo lắng — chúng tôi có một hướng dẫn hữu ích cho người mới bắt đầu về React.js.
Sử dụng câu lệnh có điều kiện
Giống như trong JavaScript, bạn có thể sử dụng các câu lệnh điều kiện như if… else để tạo các phần tử khi đáp ứng các điều kiện nhất định.
Ví dụ: bạn có thể hiển thị một phần tử được chỉ định trong nếu chặn khi một điều kiện được đáp ứng và hiển thị một điều kiện khác trong khác chặn nếu điều kiện không được đáp ứng.
Hãy xem xét ví dụ sau đây hiển thị nút đăng nhập hoặc đăng xuất tùy thuộc vào trạng thái đăng nhập của người dùng.
function Dashboard(props) {
const { isLoggedIn } = props
if(isLoggedIn){
return <button>Logout</button>
} else{
return <button>Login</button>
}
}Chức năng này hiển thị một nút khác nhau tùy thuộc vào isLoggedIn giá trị được truyền như một chỗ dựa.
Ngoài ra, bạn có thể sử dụng toán tử bậc ba. Toán tử bậc ba đưa vào một điều kiện theo sau là mã để thực thi nếu điều kiện là sự thật theo sau là mã để thực thi nếu điều kiện là giả dối.
Viết lại hàm trên thành:
function Dashboard(props) {
const { isLoggedIn } = props
return (
<>
{isLogged?<button>Logout</Logout>:<button>Login</button>)
</>
)
}
Toán tử bậc ba làm cho hàm sạch hơn và dễ đọc hơn so với nếu khác tuyên bố.
Khai báo các biến phần tử
Biến phần tử là các biến có thể chứa các phần tử JSX và được hiển thị khi được yêu cầu trong ứng dụng React.
Bạn có thể sử dụng các biến phần tử để chỉ hiển thị một phần nhất định của thành phần khi ứng dụng của bạn đáp ứng điều kiện được chỉ định.
Ví dụ: nếu bạn chỉ muốn hiển thị nút đăng nhập khi người dùng chưa đăng nhập và nút đăng xuất chỉ khi họ đã đăng nhập, bạn có thể sử dụng các biến phần tử.
function LoginBtn(props) {
return (
<button onClick={props.onClick}>
Login
</button>
);
}
function LogoutBtn(props) {
return (
<button onClick={props.onClick}>
Logout
</button>
);
}
function Dashboard() {
const [loggedIn, setLoggedIn] = useState(true)
const handleLogin = () => {
setLoggedIn(true)
}
const handleLogout = () => {
setLoggedIn(false)
}
let button;
if (loggedIn) {
button = <LogoutBtn onClick={handleLogout}/>
} else {
button = <LoginBtn onClick={handleLogin}/>
}
return (
<>
{loggedIn}
</>
)
}
Trong đoạn mã trên, trước tiên hãy tạo các thành phần nút Đăng nhập và Đăng xuất, sau đó xác định
Trong thành phần này, sử dụng React state hook để theo dõi thời điểm người dùng đăng nhập.
Bây giờ, tùy thuộc vào trạng thái hoặc hiển thị
Nếu người dùng chưa đăng nhập, hãy hiển thị
Sử dụng toán tử logic
Bạn có thể sử dụng logic && toán tử để hiển thị có điều kiện một phần tử. Ở đây, một phần tử chỉ được hiển thị nếu điều kiện đánh giá là true, nếu không, nó sẽ bị bỏ qua.
Nếu bạn muốn thông báo cho người dùng về số lượng thông báo mà họ có chỉ khi họ có một hoặc nhiều thông báo, bạn có thể sử dụng cách sau.
function ShowNotifications(props) {
const { notifications } = props
return (
<>
{notifications.length > 0 &&
<p>
You have {notifications.length} notifications.
</p>
}
</>
)
}Tiếp theo, để hiển thị một phần tử nếu biểu thức logic && đánh giá là giá trị sai, hãy xâu chuỗi logic || nhà điều hành.
Chức năng sau sẽ hiển thị thông báo “Bạn không có thông báo nào” nếu không có thông báo nào được chuyển dưới dạng đạo cụ.
function ShowNotifications(props) {
const { notifications } = props
return (
<>
{notifications.length > 0 &&
<p>
You have {notifications.length} notifications.
</p> || <p>You have no notifications</p>
}
</>
)
}Ngăn một thành phần kết xuất
Để ẩn một thành phần mặc dù nó đã được hiển thị bởi một thành phần khác, hãy trả về null, thay vì đầu ra của nó.
Hãy xem xét thành phần sau đây chỉ hiển thị nút cảnh báo nếu thông báo cảnh báo được chuyển dưới dạng đạo cụ.
function Warning (props) {
const {warningMessage} = props
if (!warningMessage) {
return null
}
return (
<>
<button>Warning</button>
</>
)
}Bây giờ, nếu bạn chuyển ‘warningMessage’ vào thành phần
<Warning warningMessage="Warning message"/> // the warning button is rendered
<Warning/> // the warning button is not renderedVí dụ về kết xuất có điều kiện trong các ứng dụng phản ứng ngoài đời thực
Sử dụng kết xuất có điều kiện để hoàn thành các tác vụ khác nhau trong ứng dụng của bạn. Một số trong số đó bao gồm chỉ hiển thị dữ liệu API khi nó có sẵn và chỉ hiển thị thông báo lỗi khi có lỗi.
Kết xuất dữ liệu được tìm nạp từ một API trong React
Quá trình tìm nạp dữ liệu từ API có thể mất một chút thời gian. Do đó, trước tiên, hãy kiểm tra xem nó có sẵn hay không trước khi sử dụng nó trong ứng dụng của bạn, nếu không React sẽ gặp lỗi nếu nó không khả dụng.
Hàm sau đây cho biết cách bạn có thể hiển thị dữ liệu do API trả về một cách có điều kiện.
function FetchData() {
const [data, setData] = useState(null);
const apiURL = "https://api.nasa.gov/planetary/apod?api_key=DEMO_KEY";
// Fetch data from API using Axios
const fetchData = async () => {
const response = await axios.get(apiURL)
// Update state with the data
setData(response.data)
}
return (
<>
<h1>Astronomy picture of the day</h1>
{
data &&
<p>{data.title}</p>
<p>{data.explanation}</p>
}
</>
)
}
Trong hàm trên, tìm nạp dữ liệu từ API Apod của NASA bằng Axios. Khi API trả về một phản hồi, hãy cập nhật trạng thái và sử dụng toán tử logic && để chỉ hiển thị dữ liệu khi có sẵn.
Hiển thị thông báo lỗi
Trong trường hợp bạn muốn chỉ hiển thị lỗi khi nó tồn tại, hãy sử dụng kết xuất có điều kiện.
Ví dụ: nếu bạn đang tạo một biểu mẫu và muốn hiển thị thông báo lỗi nếu người dùng nhập sai định dạng email, hãy cập nhật trạng thái với thông báo lỗi và sử dụng câu lệnh if để hiển thị nó.
function showError() {
const [error, setError] = useState(null)
return (
<>
{
if (error) {
<p>An error occurred: {error}</p>
}
}
</>
)
}Chọn những gì để sử dụng trong ứng dụng React của bạn
Trong hướng dẫn này, bạn đã học về một số cách có thể hiển thị các phần tử JSX một cách có điều kiện.
Tất cả các phương pháp được thảo luận cung cấp cùng một kết quả. Hãy lựa chọn những gì sẽ sử dụng tùy thuộc vào trường hợp sử dụng và mức độ dễ đọc mà bạn muốn đạt được.
Đọc tiếp
Thông tin về các Tác giả
