Wie implementiert man bedingtes Rendering in ReactJS, ohne if-else-Anweisungen zu verwenden?

Bedingtes Rendering in ReactJS: if-else-Anweisungen in JSX

In ReactJS können die if-else-Anweisungen nicht direkt in JSX-Ausdrücken verwendet werden . Dies liegt an der Natur von JSX, einem syntaktischen Zucker zum Erstellen von JavaScript-Funktionsaufrufen und -Objekten.

Um Elemente zustandsabhängig darzustellen, gibt es alternative Ansätze:

Ternärer Operator:

Verwenden Sie den ternären Operator, um eine Bedingung auszuwerten und verschiedene Elemente basierend auf dem Ergebnis darzustellen, wie gezeigt unten:

render() {
    return (   
        <View>

Funktionsaufruf:

Erstellen Sie eine Funktion, die die if-else-Logik auswertet und das entsprechende Element zurückgibt. Rufen Sie dann die Funktion innerhalb des JSX-Ausdrucks auf:

renderElement(){
   if(this.state.value == 'news')
      return data;
   return null;
}

render() {
    return (   
        <View>

Durch die Verwendung entweder des ternären Operators oder des Funktionsaufrufs können Sie Elemente in ReactJS bedingt rendern, ohne die Szene zu ändern oder Tabulatoren zu verwenden.

Das obige ist der detaillierte Inhalt vonWie implementiert man bedingtes Rendering in ReactJS, ohne if-else-Anweisungen zu verwenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!