即使狀態可見性爲假，圖像也會呈現

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。

使用parens來包裝您的三元表達式以隔離評估邏輯。

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