javascript - 相当于 React 中的 document.querySelectorAll()，onScroll

Question

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

我通常会使用类似下面的函数来检查页面中多个元素的视口(viewport)位置，并在每个元素进入视口(viewport)时触发不同的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

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

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

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