我有一个 this 组件，它为背景图像设置了一个变量，这不起作用
render() {
const target_role_gravatar = this.props.target_role_gravatar
return(
<div className="logo"
style={{"backgroundImage": "url(" + target_role_gravatar ? target_role_gravatar : 'something else' + ")"}}>
</div>
)
}
我得到了 target_role_gravatar 的所有值。
但这行得通。
render() {
const target_role_gravatar = this.props.target_role_gravatar
return(
<div>
{target_role_gravatar && <div className="logo"
style={{"backgroundImage": "url(" + target_role_gravatar + ")"}}>
</div>}
{!target_role_gravatar && <div className="logo"
style={{"backgroundImage": "url(" + this.logo + ")"}}>
</div>}
</div>
)
}
为什么？
最佳答案
+ 的优先级高于 ?:。您的表达式被评估为
(prefix + condition) ? yes : (no + suffix)
解决方案:使用括号改变优先级:
"url(" + (target_role_gravatar ? target_role_gravatar : 'something else') + ")"
或者使用模板字面量:
`url(${target_role_gravatar ? target_role_gravatar : 'something else'})`
关于javascript - jsx 中的奇怪条件渲染失败，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45205543/