Question

我必须检查用户可用的天气，如果是，则设置背景样式。我可以通过带有if语句的PHP来做到这一点，虽然如何用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中使用条件表达式的方法不止一种：

如果/ ELSE

使用null

防止渲染

元素变量

三元运营商

短路操作员（＆amp;＆amp;）

立即调用的函数表达式（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)" } : {} } />

可以选择有条件地使用类名，因为它更清晰:(已经有一个很棒的库，classnames）：

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

<a className={classes} />

HTML标记中的条件渲染

2 个答案: