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 constructor签名是：

sigmoid

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

更改之后，当相关元素的可见性大于或小于90％时将触发事件。

交叉口观察员不可信吗？

1 个答案: