インラインスタイルのbackground-position-x属性またはy属性が設定されていないことがあります

Question

コンポーネントをレンダリングすると、propsには正しい値が示されますが、生成するdiv要素にはbackground-position-xまたはbackground-position-yがありません。

私は親クラスで、次のような何か：問題の

//Class ImageSelector is roughly: 
onClick() { 
    this.state.image = randomlySelectImage() 
} 

render() { 
    return <ItemIcon image={this.state.image}/> 
} 

アイコン：fudgeupが発生した場合

class Icon extends React.component 
    render() { 
    console.log(this.props.image) 

    let style = { 
     width: 48, 
     height: 48, 
     background: `url('./img/${this.props.image.sprite}')`, 
     backgroundPositionX: -this.props.image.x, 
     backgroundPositionY: -this.props.image.y 
    } 

    return <div style={style}/>; 
} 

は、開発ツールを反応させるのは、アイコンが実際に適切であることを示しています値はx = 192とy = 384であり、divのstyleでも正しい値が表示され、検査のdiv要素はurl("./img/sprite0.png") -384pxのようになります。 xの値がありません。理由はわかりません。

Answer 1

元の問題は解決策がないようですが（React v15.3.2以降）、backgroundPositionXとbackgroundPositionYをbackgroundプロパティの一部として指定することになりました。

class Icon extends React.component 
    render() { 
    let style = { 
     width: 48, 
     height: 48, 
     background: `url('./img/${this.props.image.sprite}') ${-this.props.image.x}px ${-this.props.image.y}px` 
    } 

    return <div style={style}/>; 
}