Реагировать на условный рендеринг
В React вы можете условно визуализировать компоненты.
Есть несколько способов сделать это.
if Заявление
Мы можем использовать ifоператор JavaScript, чтобы решить, какой компонент отображать.
Пример:
Мы будем использовать эти два компонента:
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/>;
}
ReactDOM.render(
<Goal isGoal={false} />,
document.getElementById('root')
);
Попробуйте изменить isGoalатрибут на true:
Пример:
ReactDOM.render(
<Goal isGoal={true} />,
document.getElementById('root')
);
Получите сертификат!
ЗАПИСАТЬСЯ НА 95 $
Логический &&оператор
Другой способ условного рендеринга компонента React — использование &&оператора.
Пример:
Мы можем встраивать выражения JavaScript в JSX с помощью фигурных скобок:
function Garage(props) {
const cars = props.cars;
return (
<>
<h1>Garage</h1>
{cars.length > 0 &&
<h2>
You have {cars.length} cars in your garage.
</h2>
}
</>
);
}
const cars = ['Ford', 'BMW', 'Audi'];
ReactDOM.render(
<Garage cars={cars} />,
document.getElementById('root')
);
Если cars.length равно true, выражение после &&будет отображаться.
Попробуйте очистить carsмассив:
Пример:
const cars = [];
ReactDOM.render(
<Garage cars={cars} />,
document.getElementById('root')
);
Тернарный оператор
Другой способ условного рендеринга элементов — использование тернарного оператора.
condition ? true : false
Вернемся к примеру с целью.
Пример:
Вернуть MadeGoalкомпонент, если
isGoalесть true, иначе вернуть MissedGoalкомпонент:
function Goal(props) {
const isGoal = props.isGoal;
return (
<>
{ isGoal ? <MadeGoal/> : <MissedGoal/> }
</>
);
}
ReactDOM.render(
<Goal isGoal={false} />,
document.getElementById('root')
);
Чтобы узнать больше, см . раздел тернарных операторов .