Условный рендеринг элементов HTML в React?

Question

Я ищу, чтобы условно отобразить некоторые элементы HTML моего компонента.

У меня есть переменная состояния Boolean, которая может быть либо истинной (хотите визуализировать текст), либо false (хотите ничего не визуализировать).

Внутри возвратного парам для визуализации functon, я попытался следующие:

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

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

Но в обоих случаях элемент h1 оказывается вне зависимости от состояния булевой!

Любые идеи? Заранее спасибо.

Answer 1

Что-то вроде этого не работает?

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

я обычно делаю что-то вроде следующего (ч/т в Чад, код которого я украл & модифицирована)

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

Это, безусловно, работает, который звучит как то, что вы имеете делали.

Проверить 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

Я обычно делаю:

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> 
    ) 
} 

Если HTML вы хотите условно оказывать имеет много условий или является сложным по своей природе. ПРИМЕЧАНИЕ. Возврат нулевого значения будет просто ничего не отображаться.

Или короче, проще вариант:

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

Если он не работает, пожалуйста, предоставить больше контекста, может быть, некоторые сообщения об ошибках или что-то?