javascript - 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'})`