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

但是在这两种情况下，无论 Boolean 的状态如何，都会渲染 h1 元素！

有任何想法吗？提前致谢。

Answer 1

我通常这样做：

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

如果它不起作用，请提供更多上下文，也许是一些错误消息或其他内容？

Answer 2

像这样的东西不起作用吗？

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>

    )
}

}