React 中的条件样式

Posted 2023-03-16

【中文标题】React 中的条件样式

【英文标题】：conditional styling in React

【发布时间】：2019-04-25 09:17:26

【问题描述】：

在 React 中我可以做这样的事情吗：

style= $post.type === "team_member" ? backgroundColor : "green"

如何根据 React 中的条件设置样式？

提前谢谢你！

【问题讨论】：

Correct way to handle conditional styling in React的可能重复

【参考方案1】：

你可以，而且已经接近你已经拥有的；

style=backgroundColor: $post.type === "team_member" ? 'green': 'not_a_team_member'

style 属性需要一个对象，因此双 ，您只是有条件地分配 backgroundColor 的值，因此条件是对象中键 backgroundColor 的值。

希望这会有所帮助！

【讨论】：

嗨！删除 $ 符号后，它就像魅力一样工作！所以，谢谢你的帮助！

【参考方案2】：

你可以这样做：

<div style= visibility: this.state.post.type === 'team_member'? 'green': ''></div>

【参考方案3】：

你可以这样做：

<div style= post.type === "team_member" ? backgroundColor : "green" : '' ></div>