路口观察者不可信？

Question

当表格单元格完全可见时，我正在更改其背景颜色。为了完成这项任务，我使用了交叉点观察器。

所有代码都可以在代码沙箱上使用，并通过演示重现该错误：

我正在使用 useInView 钩子作为交叉观察器：

export const useInView = options => {
  const ref = useRef();
  const [isVisible, setIsVisible] = useState(false);
  const [intersectionRatio, setIntersectionRatio] = useState(false);

  useEffect(() => {
    const observer = new IntersectionObserver(([entry]) => {
      console.log("called");
      setIsVisible(entry.isIntersecting);
      setIntersectionRatio(entry.intersectionRatio);
    }, options);

    if (ref.current) observer.observe(ref.current);

    return () => {
      if (ref.current) observer.unobserve(ref.current);
    };
  }, [ref, options]);

  return [ref, isVisible, intersectionRatio];
};

这是我在其中渲染数据的表：

 <div id="my-table" style={{ height: 200, width: 200, overflow: "auto" }}>
    <table>
      <tbody>
        {tableValues.map((row, rowIndex) => (
          <tr key={rowIndex}>
            {row.map((cell, cellIndex) => (
              <CellRendererContainer
                key={`${rowIndex}${cellIndex}`}
                rowIndex={rowIndex}
                cellIndex={cellIndex}
                tableCell={cell}
              />
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  </div>

相交观察器在CellRenderer中使用，分为两个文件：

CellRendererContainer.js

const CellRendererContainer = ({ rowIndex, cellIndex, tableCell }) => {
  const [ref, isVisible, intersectionRatio] = useInView({
    root: document.querySelector("#my-table"),
    rootMargin: "0px",
    threshold: 0.0
  });

  return (
    <CellRenderer
      ref={ref}
      isVisible={isVisible}
      intersectionRatio={intersectionRatio}
      rowIndex={rowIndex}
      cellIndex={cellIndex}
      tableCell={tableCell}
    />
  );
};

这是单元格的实际渲染，CellRenderer.js

const CellRenderer = React.forwardRef(
  ({ isVisible, intersectionRatio, rowIndex, cellIndex, tableCell }, ref) => (
    <td
      ref={ref}
      style={{
        padding: 25,
        backgroundColor:
          rowIndex > 0 && cellIndex > 0 && isVisible && intersectionRatio > 0.9
            ? "red"
            : "white"
      }}
    >
      {tableCell}
    </td>
  )
);

当前实现中的问题是：交叉观察者对某些项目的回调没有被调用。

预期结果：

任何变得可见的单元格一旦完全可见就应该具有红色背景。否则，该单元格应该是白色的。

代码沙箱链接：（这样就不需要滚动到顶部）

Answer 1

IntersectionObserver构造函数签名是：

var observer = new IntersectionObserver(callback[, options]);

该options参数是可选的，如果提供的话，应该是一个具有描述您希望新创建的行为方式的属性的对象IntersectionObserver。

在 中hook.js，你有这一行：

const observer = new IntersectionObserver(([entry]) => {
  console.log("called");
  setIsVisible(entry.isIntersecting);
  setIntersectionRatio(entry.intersectionRatio);
}, options);

您的变量options未设置为在此上下文中有用的值。

相反，类似这样的事情可以满足您的需求：

const observer = new IntersectionObserver(([entry]) => {
  console.log("called");
  setIsVisible(entry.isIntersecting);
  setIntersectionRatio(entry.intersectionRatio);
}, {
  threshold: 0.9
});

进行此更改后，当相关元素的可见度大于或小于 90% 时，将触发该事件。