0

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

我在我的 React 组件中编写了一个函数并将其加载到 ComponentDid Mount 中，但我收到错误“无法分配给不是引用的右值” - 在线
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]) }
  }
4

2 回答 2

1

您正在分配的返回值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;
于 2019-05-01T08:49:49.957 回答
1

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

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;
于 2019-05-01T08:53:52.560 回答