Bedingtes Rendering reagieren
In React können Sie Komponenten bedingt rendern.
Dazu gibt es mehrere Möglichkeiten.
if Erklärung
Wir können den ifJavaScript-Operator verwenden, um zu entscheiden, welche Komponente gerendert werden soll.
Beispiel:
Wir verwenden diese beiden Komponenten:
function MissedGoal() {
return <h1>MISSED!</h1>;
}
function MadeGoal() {
return <h1>Goal!</h1>;
}
Beispiel:
Jetzt erstellen wir eine weitere Komponente, die basierend auf einer Bedingung auswählt, welche Komponente gerendert werden soll:
function Goal(props) {
const isGoal = props.isGoal;
if (isGoal) {
return <MadeGoal/>;
}
return <MissedGoal/>;
}
ReactDOM.render(
<Goal isGoal={false} />,
document.getElementById('root')
);
Versuchen Sie, das isGoalAttribut zu ändern true:
Beispiel:
ReactDOM.render(
<Goal isGoal={true} />,
document.getElementById('root')
);
Zertifiziert werden!
$ 95 REGISTRIEREN
Logischer &&Operator
Eine andere Möglichkeit, eine React-Komponente bedingt zu rendern, ist die Verwendung des &&Operators.
Beispiel:
Wir können JavaScript-Ausdrücke in JSX einbetten, indem wir geschweifte Klammern verwenden:
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')
);
Wenn cars.length wahr gleich ist, wird der Ausdruck danach &&gerendert.
Versuchen Sie, das carsArray zu leeren:
Beispiel:
const cars = [];
ReactDOM.render(
<Garage cars={cars} />,
document.getElementById('root')
);
Ternärer Operator
Eine andere Möglichkeit, Elemente bedingt zu rendern, ist die Verwendung eines ternären Operators.
condition ? true : false
Wir werden auf das Zielbeispiel zurückkommen.
Beispiel:
Geben Sie die MadeGoalKomponente zurück, wenn
isGoalist true, andernfalls geben Sie die MissedGoalKomponente zurück:
function Goal(props) {
const isGoal = props.isGoal;
return (
<>
{ isGoal ? <MadeGoal/> : <MissedGoal/> }
</>
);
}
ReactDOM.render(
<Goal isGoal={false} />,
document.getElementById('root')
);
Weitere Informationen finden Sie im Abschnitt über ternäre Operatoren .