Javascript 有时是内联样式'；未设置s background-position-x或y属性

渲染组件时，它的

props

显示它具有正确的值，但它生成的div元素缺少

background-position-x

或

background-position-y

我在父类中执行以下操作：

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

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

//类ImageSelector大致如下：
onClick（）{
this.state.image=randomlySelectImage（）
}
render（）{
返回
}

有问题的图标：

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}/>;
}

类图标扩展React.component
render（）{
console.log（this.props.image）
让样式={
宽度：48，
身高：48，
背景：`url（'./img/${this.props.image.sprite}'）`，
背景位置x:-这个.props.image.x，
背景位置：这个。道具。图片。y
}
返回；
}

---

当出现错误时，React-dev工具显示图标确实具有适当的可用值

x=192

和

y=384

，甚至div的

样式也显示了正确的值，而检查时的div元素如下所示：
url（“./img/sprite0.png”）-384px
。
x
值丢失，我不明白为什么。
虽然原始问题似乎没有解决方案（至少在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}/>;
}

类图标扩展React.component
render（）{
让样式={
宽度：48，
身高：48，
背景：`url（'./img/${this.props.image.sprite}'）${-this.props.image.x}px${-this.props.image.y}px`
}
返回；
}
虽然原始问题似乎没有解决方案（至少从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}/>;
}

类图标扩展React.component
render（）{
让样式={
宽度：48，
身高：48，
背景：`url（'./img/${this.props.image.sprite}'）${-this.props.image.x}px${-this.props.image.y}px`
}
返回；
}
游戏进行得很晚，但你的问题没有解决办法：你的内联风格模棱两可。特别是，当同时存在速记属性（
background
）和完整属性（
background position
）时失败

最简单的解决方案是不使用速记属性：

-background:`url（'./img/${this.props.image.sprite}'）`，
+backgroundImage:`url（'./img/${this.props.image.sprite}'）`，
背景位置x:-这个.props.image.x，
背景位置：这个。道具。图片。y
游戏进行得很晚，但你的问题没有解决办法：你的内联风格模棱两可。特别是，当同时存在速记属性（
background
）和完整属性（
background position
）时失败

最简单的解决方案是不使用速记属性：

-background:`url（'./img/${this.props.image.sprite}'）`，
+backgroundImage:`url（'./img/${this.props.image.sprite}'）`，
背景位置x:-这个.props.image.x，
背景位置：这个。道具。图片。y
您确定它不是未定义、null或其他错误值吗？是。React-Dev tools在所讨论的div上显示了以下内容：这不是一个很好的答案，所以我将把它作为一个注释添加进去，但它确实是
背景位置：This.props.x+“px”+“”+This.props.y+“px”
work？Gross，但这大部分都是有效的（错误率下降了约99%）。但是，每隔一段时间，
backgroundPosition
prop不包含在元素的样式中，就像X或Y不包含在元素样式中一样。您确定它不是未定义、null或其他错误值吗？是的。React-Dev tools在所讨论的div上显示了以下内容：这不是一个很好的答案，所以我将把它作为一个注释添加进去，但它确实是
背景位置：This.props.x+“px”+“”+This.props.y+“px”
work？Gross，但这大部分都是有效的（错误率下降了约99%）。然而，每隔一段时间，
背景位置
道具就不会像X或Y那样包含在元素的样式中。