Javascript 元素'；s风格'；s顶部和左侧有时不'；t在ReactJS应用程序中更新

我有这样一个元素：

render() {
    // figure these values out based on props and state
    let left = ... 
    let top = ...
    // the values of these are floating point or integer

    let src = '/image.png'
    let style={top: top, left: left}
    console.log("SETTING STYLE", style)
    return <img src={src} style={style}/>
}

Draggabilly.prototype._stopDragging = function(event) {
    var x = event.something.x; y = event.something.y;
    this.triggerEvent('dragEnd', ...)
    this.element.style.left = x
    this.element.style.top = y
}

render（）{
//根据道具和状态计算出这些值
让左=。。。
让顶部=。。。
//这些值是浮点或整数
让src='/image.png'
let style={top:top，left:left}
console.log（“设置样式”，样式）
返回
}

到目前为止还不错。样式表将这些图像设置为

position:absolute

，这样就可以了。我可以通过道具、状态和业务逻辑控制元素的位置

但是，可以拖动和移动图元（使用）。我有一个事件侦听器，当元素停止被拖动时侦听。这给了我一个位置（x，y）。然后，我将其传递到一个函数中，该函数基于一些业务逻辑“更正”数字并更新道具和状态，以便重新呈现元素

但是，有时，更改不会生效。为什么

正如您所看到的，我

console.log

应该是什么

样式

，并且我可以清楚地看到它说的是类似于

Object{top:123.5，left:234.5}

的内容，但是当我检查devtools中的元素并查看规则集时，数字是不同的！ 例如

---

基本上，这些数字有时与我在

render（）

方法中渲染元素时设置的数字不符

答案Draggably插件在触发我的React应用程序所依赖的事件后，将

顶部

和

左侧

设置为太。也就是说，它的功能如下：

render() {
    // figure these values out based on props and state
    let left = ... 
    let top = ...
    // the values of these are floating point or integer

    let src = '/image.png'
    let style={top: top, left: left}
    console.log("SETTING STYLE", style)
    return <img src={src} style={style}/>
}

Draggabilly.prototype._stopDragging = function(event) {
    var x = event.something.x; y = event.something.y;
    this.triggerEvent('dragEnd', ...)
    this.element.style.left = x
    this.element.style.top = y
}

因此，两个不同的系统正在尝试设置样式属性