ReactのHTML要素の条件付きレンダリング？

Question

私は、コンポーネントのいくつかのHTML要素を条件付きでレンダリングしようとしています。

私は状態変数Booleanを持っています。これは、true（テキストのレンダリング）またはfalse（何も表示しない）のいずれかになります。

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

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

をしかし、両方のケースでは、H1要素が関係なく、ブールの状態のレンダリングされます。

レンダリングfunctonの戻りのparamの内部では、私は次のことを試してみました！

アイデア？前もって感謝します。

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

私は通常（そのコードが、私は修正&を盗んだチャドのH/t）は、次のような何かを

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が条件の多くを持っているか、本質的に複雑である場合。注：nullを返すだけで何も描画されません。

か短い、簡単なバージョン：

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

より多くのコンテキスト、おそらくいくつかのエラーメッセージか何かを提供してください動作しない場合は？