Javascript 交叉点观察者-无法分配给不是引用的右值

我正在尝试设置一个交叉点观察者，它在我的页面上查找具有原始数据bg的元素，并将其指定为背景图像url样式，因此图像是后加载的

我已经在我的React组件中编写了一个函数，并将其加载到ComponentDid Mount中，但在第

返回target.hasAttribute（'data-original-bg'）？target.getAttribute（'style'）+='背景图像：'+backgroundImage:target.getAttribute（'style'）+='背景图像：'+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]) }
  }

componentDidMount（）{
this.setIndex=window.setInterval（（）=>{
this.setupObserver（）
}, 3000)
}
设置观察者（）{
var nodes=document.querySelectorAll（'img[data original]，div[data original bg]'））
window.io=新的IntersectionObserver（函数（项）{
对于（变量i=0；i

您正在为

getAttribute

的返回值赋值，该值是右值而不是左值。另外，对三元表达式的分支进行赋值也不是一个好主意，三元表达式的两个分支都做相同的事情

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;

---

您正在为

getAttribute

的返回值赋值，该值是右值而不是左值。另外，对三元表达式的分支进行赋值也不是一个好主意，三元表达式的两个分支都做相同的事情

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;

---

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

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; 

---

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

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;