Bedingtes Rendern von HTML-Elementen in React?

Question

Ich möchte bestimmte HTML-Elemente meiner Komponente bedingt rendern.

Ich habe eine Statusvariable Boolean, die entweder wahr (möchte Text rendern) oder falsch (will nichts rendern).

Innerhalb der Rückkehr param für die functon machen, ich habe folgende versucht:

{this.state.boolean ? <div><h1>True</h1></div> : <div></div>} 

{this.state.boolean && <div><h1>True</h1></div> || <div></div>} 

Aber in beiden Fällen ist das h1-Element unabhängig vom Zustand der Booleschen gemacht!

Irgendwelche Ideen? Danke im Voraus.

Answer 1

So etwas funktioniert nicht?

class Demo extends React.Component{ 
constructor(props){ 
    super(props); 
    this.state = { 
     boolean: false 
    }; 
} 
render(){ 
    return(
     <div> 
      {this.state.boolean && <div><h1>True</h1></div>} 
     </div> 

    ) 
} 

}

Answer 2

ich normalerweise etwa wie folgt (h/t in den Tschad, dessen Code Ich habe & geändert)

class Demo extends React.Component{ 
    constructor(props){ 
     super(props); 
     this.state = { 
      boolean: false 
     }; 
    } 
    render(){ 
     var bool = null; 
     if (this.state.boolean) { 
      bool = (<div><h1>True</h1></div>); 
     } 
     return(
      <div> 
       {bool} 
      </div> 
     ); 
    } 
} 

Answer 3

Dies funktioniert auf jeden Fall, das klingt wie das, was du hast getan.

Überprüfen Sie die bin

https://jsbin.com/qomofonera/edit?html,js,output

class Demo extends React.Component{ 
    constructor(props){ 
    super(props); 

    this.state = { 
     boolean: false 
    }; 
    } 
    render(){ 
    return(
     <div> 
      {this.state.boolean ? <div><h1>True</h1></div> : <div><h1>False</h1></div>} 
     </div> 

    ) 
    } 
} 

Answer 4

ich in der Regel:

outputHTML(boolean) { 
    if(!boolean) return null; 
    return (
     <div> 
     Something you wanted to show if the boolean was present 
     </div> 
    ) 
} 

render() { 
    return (
    <div> 
     {this.outputHTML(this.state.boolean)} 
    </div> 
    ) 
} 

Wenn die HTML Sie wollen eine Menge von Bedingungen bedingt machen hat oder komplex ist von Natur aus. HINWEIS: Wenn Sie null zurückgeben, wird nur nichts gerendert.

oder die kürzere, einfachere Version:

{this.state.boolean && <div><h1>True</h1></div>} 

Wenn es nicht funktioniert, bitte mehr Kontext zu machen, vielleicht einige Fehlermeldungen oder so etwas?