Intersection Observer - 不能分配给不是引用的右值

Question

我正在尝试设置一个交叉点观察器，它在我的页面上查找具有 data-original-bg 的元素，并将其指定为背景图像 url 样式，以便后加载图像。

我在我的 React 组件中编写了一个函数并将其加载到 ComponentDid Mount 中，但我收到错误 'cannot assign to rvalue that is not a reference' - 在线
return target.hasAttribute('data-original-bg') ? target.getAttribute('style') += 'background-image:' + backgroundImage : target.getAttribute('style') += 'background-image:' + backgroundImage

我的职能：

  componentDidMount () {
    this.setIndex = window.setInterval(() => {
      this.setupObserver()
    }, 3000)
  }

  setupObserver () {
    var nodes = document.querySelectorAll('img[data-original],div[data-original-bg]')
    window.io = new IntersectionObserver(function (items) {
      for (var i = 0; i < items.length; i++) {
        var item = items[i]
        var target = item.target
        if (target.hasAttribute('src')) {
          window.io.unobserve(target)
          continue
        }
        if (!item.intersectionRatio) continue
        return target.hasAttribute('data-original-bg') ? target.getAttribute('style') += 'background-image:' + backgroundImage : target.getAttribute('style') += 'background-image:' + backgroundImage
        if (target.hasAttribute('data-original')) target.setAttribute('src', target.getAttribute('data-original'))
        window.io.unobserve(target)
      }
    })
    for (var i = 0; i < nodes.length; i++) { window.io.observe(nodes[i]) }
  }

Answer 1

您正在分配给 getAttribute 的 return 值，这是右值而不是左值。在三元表达式的分支中进行赋值也不是一个好主意，而三元表达式的两个分支都做同样的事情。

return target.hasAttribute('data-original-bg')
    ? target.getAttribute('style') += 'background-image:' + backgroundImage
    : target.getAttribute('style') += 'background-image:' + backgroundImage

您可能想这样做：

if (target.hasAttribute('data-original-bg')) {
    target.style.backgroundImage = backgroundImage;
}
return;

Answer 2

下一行是尝试分配给一个值而不是一个引用。

return target.hasAttribute('data-original-bg') ? 
    target.getAttribute('style') += 'background-image:' + backgroundImage 
    : target.getAttribute('style') += 'background-image:' + backgroundImage

这个 (target.getAttribute('style') += 'background-image:' + backgroundImage) 可以提炼为一个赋值表达式：

2 += 3

这表明它并没有按照您的想法行事。

我建议打破这一行并逐步对目标执行样式更新。

if target.hasAttribute('data-original-bg') {
    const newStyle = [
      target.getAttribute('style'),
      `background-image: ${backgroundImage}`, 
    ].join(';')
    target.setAttribute('style', newStyle)
}
return;

Intersection Observer - 不能分配给不是引用的右值

Intersection Observer - cannot assign to rvalue that is not a reference

javascript

reactjs

intersection-observer