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

有问题的图标：

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

当fudgeup发生时，React dev工具显示Icon确实具有适当的值x = 192和y = 384，甚至div的style显示正确的值，而检查时的div元素如下所示：url("./img/sprite0.png") -384px。缺少x值，我不明白为什么。

Answer 1

虽然原始问题似乎没有解决方案（至少与React v15.3.2相同），但解决方法最终指定backgroundPositionX和backgroundPositionY作为{{1}的一部分} property。

background

Answer 2

晚于游戏，但是您的问题没有解决方案：您的内联样式不明确。具体来说，React tries to optimize style properties (issue 5030)，但同时存在速记属性（background）和完整属性（background-position）时失败。

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

 - background: `url('./img/${this.props.image.sprite}')`,
 + backgroundImage: `url('./img/${this.props.image.sprite}')`,
   backgroundPositionX: -this.props.image.x,
   backgroundPositionY: -this.props.image.y

有时，未设置内联样式的background-position-x或y属性

2 个答案: