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元素！

有什么想法吗？提前谢谢。

Answer 1

这绝对有效，听起来就像你一直在做的那样。

检查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 2

我通常会这样做：

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 3

这样的东西不起作用？

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 4

我通常做类似以下的事情（对于我偷走和修改过的代码的乍得）。

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

在React中有条件地呈现HTML元素？

4 个答案: