等效于 React、onScroll 中的 document.querySelectorAll()

Question

document.querySelectorAll('.classname')React 中的等价物是什么？我知道我应该使用 Refs，但是我如何观察多个 RefsonScroll呢？

我通常使用类似下面这样的函数来检查页面中多个元素的视口位置，并在每个元素进入视口时触发不同的css动画：

HTML

<ul>
  <li data-position="below-viewport"></li>
  <li data-position="below-viewport"></li>
  <li data-position="below-viewport"></li>
  <li data-position="below-viewport"></li>
</ul>

Javascript

getPosition: function (element) {
  const rect = element.getBoundingClientRect();

  if ((rect.top > -1) && (rect.top < (window.innerHeight * 0.75))) {
    element.setAttribute('data-js-position','in-viewport');
  } else if ((rect.top > 0) && (rect.top < window.innerHeight)) {
    element.setAttribute('data-js-position','entering-viewport');
  } else if (rect.top > window.innerHeight) {
    element.setAttribute('data-js-position','below-viewport');
  } else if (rect.bottom < 0) {
    element.setAttribute('data-js-position','above-viewport');
  }
}

window.addEventListener('scroll', function() {
  [].forEach.call(document.querySelectorAll('[data-js-position]'), el => {
    positionChecker.getPosition(el);
  })
});

我将如何在 React 中实现类似的东西？你能举一个在 React 中观察多个 div 的函数的例子吗？

更好的是：我怎样才能在 中抽象这个函数App.js，以便我也可以在子组件中使用它？

Answer 1

使每个lihtml 元素成为其自己的组件，并ref在其自己的状态下保存对它的引用。

class LiElement extends React.Component {
  componentDidMount() {
    this.ref.getPosition()
  }

  render() {
    return (
      <li ref={(ctx) => this.ref = ctx}>
      </li>
    )
  }
}