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

Question

I have a this component that set a variable to the background image, this won't work

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>
    )
}

I got all value of target_role_gravatar.

But this worked.

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>
        )
    }

Why?

Answer 1

+ has a higher precedence than ?: . Your expression is evaluated as

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

Solution: Use parenthesis to change the precedence:

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

Or use template literals:

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