ReactJS：用函數定義樣式屬性

是否可以通過函數定義CSS內聯樣式？我試圖做到這一點：ReactJS：用函數定義樣式屬性

render() { 
var listStyle = { 
    position: "relative", 
    display:() => { 
     console.log("Still alive") 
     if(this.state.open) { 
      return "block"; 
     } 
     else return "none"; 
    } 
return <li style={listStyle}> 
..... 
}

無濟於事。它甚至不會記錄「仍然活着」，所以該功能甚至不執行。我知道將函數分配給JS中的對象沒有問題，所以給了什麼？

來源

2016-12-15 Rafael

該公司預計字符串，而不是一個功能，所以它不會刻意去執行你的功能。當然，JS允許你這樣做，但這並不意味着反應會期待或者會按照你的預期處理。或者你可以在那裏執行一個返回字符串的函數，如果你這麼傾向。 –

是的，我忘了函數（謝天謝地）不會因爲它存在而執行它自己。感謝您的提醒！ – Rafael

你可以嘗試做這樣的，更簡單的

var listStyle = { 
    position: "relative", 
    display:this.state.open?'block':'none' 
}

我覺得風格對象剛剛訪問性能

價值，但如果你真的喜歡的功能。您可以使用自執行匿名函數，使其運行

var listStyle = { 
    position: "relative", 
    display: (()=>{ 
     console.log('alive') 
     if(this.state.open){ 
      return 'block' 
     }else{ 
      return 'none' 
     } 
    })() 

}

來源

2016-12-15 03:17:27 chanjianyi

我喜歡你的第二個例子:)謝謝你分享這個 – EQuimper

好吧，所以我忘了我可以只是（）函數來執行它。它不會因爲我把「返回」放在那裏而自行執行。謝謝！同樣是啊，第一種選擇是肯定更優雅。出於某種原因，它完全沒有辦法做到這一點。 – Rafael

你可以用這個

const listStyle = { 
    position: 'relative' 
} 


const checkDisplay = open => { 
    if (open) { 
    return "block" 
    } 
    return "none"; 
} 

<li style={{...listStyle, display: checkDisplay(this.state.open)}}></li>

去讓我知道，如果這項工作。希望可以幫到您:)

來源

2016-12-15 03:42:28 EQuimper

它的工作原理！我與對方的回答會，因爲它更優雅，但藉此+1，你活該。 ;） – Rafael

完美，很高興聽到這樣的工作:)。對於另一個我也喜歡的人來說是個不錯的選擇;） – EQuimper

ReactJS：用函數定義樣式屬性

回答

相關問題