Warunkowe renderowanie w React pozwala na decydowanie, które elementy interfejsu mają być wyświetlane w zależności od określonych warunków. Podobnie jak w JavaScript, możemy użyć instrukcji warunkowych, takich jak if czy operatora warunkowego ? :, aby kontrolować, co i kiedy jest renderowane.
W React mamy 3 możliwości warunkowego wyświetlania treści:
Użycie wyrażenia trójargumentowego
Bezpośrednio w kodzie JSX
function UserProfile({ user }) {
return (
<div>
<h1>Profil Użytkownika</h1>
{user ? <p>Witaj, {user.name}</p> : <p>Proszę się zalogować.</p>}
</div>
);
}Lub korzystając ze zmiennej/stałej
function UserProfile({ user }) {
const welcomeMessage = user ? <p>Witaj, {user.name}</p> : <p>Proszę się zalogować.</p>;
return (
<div>
<h1>Profil Użytkownika</h1>
{welcomeMessage}
</div>
);
}Skorzystanie z efektu ubocznego operatora &&
function LogoutButton({ isLoggedIn }) {
return (
<div>
{isLoggedIn && <button>Wyloguj się</button>}
</div>
);
}W tym przykładzie, przycisk „Wyloguj się” zostanie wyrenderowany tylko wtedy, gdy isLoggedIn jest true. Jeśli isLoggedIn jest false, React nie wyrenderuje nic za operatorem &&.
Możemy zwrócić komponent w takim warunku.
import CustomButtom from './CustomButton';
function LogoutButton({ isLoggedIn }) {
return (
<div>
{isLoggedIn && <CustomButton />}
</div>
);
}Za pomocą zmiennej
function UserProfile({ user }) {
let welcomeMessage = <p>Proszę się zalogować.</p>;
if (user) {
welcomeMessage = <p>Witaj, {user.name}</p>
}
return (
<div>
<h1>Profil Użytkownika</h1>
{welcomeMessage}
</div>
);
}Za pomocą zmiennej funkcji
import CustomButton from './CustomButton';
import InfoCustom from './InfoCustom';
function renderComponent(isLoggedIn) {
if (isLoggedIn) {
return <CustomButton />;
} else {
return <InfoCustom />;
}
}
function App() {
const isLoggedIn = false;
return (
<div className="App">
{renderComponent(isLoggedIn)}
</div>
);
}
export default App;Możemy skorzystać z instrukcji switch
import React from 'react';
import CustomButton from './CustomButton';
import InfoCustom from './InfoCustom';
import AdminPanel from './AdminPanel';
function renderComponent(userRole) {
switch (userRole) {
case 'guest':
return <CustomButton />;
case 'user':
return <InfoCustom />;
case 'admin':
return <AdminPanel />;
default:
return <p>Nieznany status użytkownika</p>;
}
}
function App() {
// Możemy przyjąć, że status jest pobierany np. z kontekstu aplikacji
// Tu dla przykładu ustawiamy na sztywno
const userRole = 'guest';
return (
<div className="App">
{renderComponent(userRole)}
</div>
);
}
export default App;