React Умовний рендеринг (відтворення)
У React ви можете умовно рендерити компоненти.
Це можна зробити кількома способами.
Інструкція if
Ми можемо використовувати JavaScript інструкцію if, щоб вирішити, який компонент відображати.
Приклад:
Ми будемо використовувати ці два компоненти:
function MissedGoal() {
return <h1>MISSED!</h1>;
}
function MadeGoal() {
return <h1>Goal!</h1>;
}
Приклад:
Тепер ми створимо інший компонент, який вибере, який компонент відобразити на основі умови:
function Goal(props) {
const isGoal = props.isGoal;
if (isGoal) {
return <MadeGoal/>;
}
return <MissedGoal/>;
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Goal isGoal={false} />);
Спробуйте змінити атрибут isGoal на true:
Приклад:
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Goal isGoal={true} />);
Логічний оператор &&
Інший спосіб умовного рендерингу компонента React — використання оператора &&.
Приклад:
Ми можемо вбудовувати вирази JavaScript у JSX за допомогою фігурних дужок:
function Garage(props) {
const cars = props.cars;
return (
<>
<h1>Garage</h1>
{cars.length > 0 &&
<h2>
У вашому гаражі є {cars.length} автомобілів.
</h2>
}
</>
);
}
const cars = ['Ford', 'BMW', 'Audi'];
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Garage cars={cars} />);
Якщо cars.length > 0 дорівнює true, вираз після && буде відображено.
Спробуйте очистити масив cars:
Приклад:
const cars = [];
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Garage cars={cars} />);Тернарний оператор
Іншим способом умовного відтворення елементів є використання тернарного оператора.
condition ? true : false
Повернемося до прикладу з голом.
Приклад:
Повертає компонент MadeGoal, якщо isGoal має значення true , інакше поверне компонент MissedGoal:
function Goal(props) {
const isGoal = props.isGoal;
return (
<>
{ isGoal ? <MadeGoal/> : <MissedGoal/> }
</>
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Goal isGoal={false} />);
Щоб дізнатися більше, перегляньте розділ Тернарний оператор на нашому сайті W3Schools українською.
