HTML標簽中的條件渲染

Question

我必須檢查用戶可用的天氣，如果可以，則設置背景樣式。 我可以簡單地通過PHP使用if語句來做到這一點，盡管如何用react來完成呢？

到目前為止，我有：

<a className={classes} onClick={this.toggleDialog} { theUser.get('isAvailable') == 1 && style={{backgroundColor: "rgba(39, 174, 96, .15)"}} }  > 

{theUser.get('first_name')}

</a>

Answer 1

在React中使用條件表達式的方法不止一種：

如果別的

防止使用null渲染

元素變量

三元運算符

短路運算符（&&）

立即調用的函數表達式（IIFE）

子組件

高階成分（HOC）

如果您是新手，我強烈建議您閱讀以下內容： https : //blog.logrocket.com/conditional-rendering-in-react-c6b0e5af381e

Answer 2

使用三元運算符進行內聯樣式：

<a style={ theUser.get('isAvailable') == 1 ? { backgroundColor: "rgba(39, 174, 96, .15)" } : {} } />

這是有條件地使用類名的一種選擇 ，因為它更簡潔：（已經有一個很棒的庫， 類名 ）：

const classes = classNames({
  'available': theUser.get('isAvailable') == 1,
  'italics': true, // Will add `italics` className
  'bold': false, // Won't add `bold` className
})

<a className={classes} />