Question

我使用React进行了materialze（16.8）项目设置，我尝试自定义scrollSpy，它是随机工作的。有时它的偏移量确实为0，有时会出现默认行为（屏幕中央）。

import ...
import M from 'materialize-css';

const Product = () => {
  useEffect(() => {
    document.addEventListener('DOMContentLoaded', function() {
      const elems = document.querySelectorAll('.scrollspy');
      M.ScrollSpy.init(elems, { scrollOffset: 0 });
    });
  }, []);

  return (
    <a href="#certified" className="product-anchor-link">
      certified
    <a>
    ...
    <div className="certified-wrapper scrollspy" id="certified">
    ...
    <div>
  );
};

我还使用Hooks，所以我可以继续使用对项目很重要的无状态组件。

任何想法我做错了什么？不幸的是，互联网上关于materialze的问题很少能找到。

Answer 1

以下内容与useEffect一起正常工作。您不需要在DOMContentLoaded上添加侦听器。在位于最上层的组件中时，下面的效果很好。

useEffect(() => {
  const elems = document.querySelectorAll(".scrollspy");
  M.ScrollSpy.init(elems, { scrollOffset: 0 });
}, []);

Materialize ScrollSpy选项不适用于React

1 个答案: