0

ページ上で data-original-bg を持つ要素を検索し、それを背景画像の URL スタイルとして割り当てる交差オブザーバーを設定しようとしているため、画像がポストロードされます。

React コンポーネントに関数を記述し、それを ComponentDid Mount にロードしましたが、「参照ではない rvalue に割り当てることはできません」というエラーが表示されます - 行に
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