即使状态可见性为false也会渲染图像

Question

我打算仅在单击按钮时渲染元素或使元素可见。 但是无论如何元素都会被渲染。 即使日志说状态为假

getInitialState: function(){
    return {
        number: 0,
        'image1': "https://www.bignerdranch.com/img/blog/2014/07/Button-2.png",
        visible1: false          
    }
},

add: function(){
    var number = this.state.number;
    number = number+1;
    console.log(number);
    var temp = "visible"
    temp = temp + number
    var s ={};
    s[temp] = true;
    console.log(s);
    this.setState(s); 
},


render: function(){
    return(
      <div>
        <img  className={"addpicture "+this.state.visible1?"visible":"invisible"} onClick={this.camera} src={this.state.image1} data-cam={1}/>
        <button onClick={this.add}>Click me</button>
        {console.log(this.state.visible1)}
      </div>
    );
}

Answer 1

您的三元表达式"addpicture "+this.state.visible1?"visible":"invisible"的计算结果为"addpicture " + this.state.visible ，由于字符串强制，它返回"addpicturefalse" 。 由于所有非空字符串都是真实的，因此返回的visible 。

使用括号包裹您的三元表达式，以隔离评估逻辑。

"addpicture "+ (this.state.visible1?"visible":"invisible")