奇怪的条件渲染在jsx中失败

Question

我有一个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>
        )
    }

为什么？

Answer 1

+的优先级比?: 。 您的表情被评估为

(prefix + condition) ? yes : (no + suffix)

解决方案：使用括号更改优先级：

"url(" + (target_role_gravatar ? target_role_gravatar : 'something else') + ")"

或使用模板文字：

`url(${target_role_gravatar ? target_role_gravatar : 'something else'})`