css - 在 React Link 元素上设置样式会导致点击中断

Question

所以，这个我就是想不通。我尝试了一种自定义（在我的脑海中，简单而优雅）的分页解决方案，但我意识到它可能不是那样的。但是，它仍然有效，而且它现在打破的方式根本没有意义。

为此，我结合使用 Pagino（来自其他 SO 答案的部分编辑）和 react-scroll 导入。

在渲染函数内部：

         <div id="cardList-pagino-buttons">
          <ul>
            {pages.map((page) => (
              <Link to={"cardpage-"+(page !== "next" || "previous" ? pagino.page : page)} 
              key={page} onClick={() => hanglePaginoNavigation(page)} 
                spy={true} smooth={true} duration={100} containerId="cardList-pagino-container">
                {/* { page == "end-ellipsis" || "start-ellipsis" ? "..." : page} */}
                {page}
              </Link>
            ))}
          </ul>
        </div>
        <Element id="cardList-pagino-container">
         {/* Cardlist renders multiple: <div id='cardpage-[index]'>[CardData]</div> */}
          <CardList cardList={cardList}/> 
        </Element>
      </div>

hanglePaginoNavigation 函数：

    const hanglePaginoNavigation = (type) => {
      if (typeof type === "string") {
        // Something wrong with the start and end elepsis, Coffeescript = pagino[type]?.();
        // pagino[type]();
        let nxtoprv = type == "next" ? pagino.page + 1 : pagino.page - 1,
            currentPage = document.getElementById("cardpage-"+nxtoprv);
        currentPage.scrollIntoView({
          behavior: "smooth",
          block: "nearest"
        });
        pagino.setPage(nxtoprv);
      } else {
        let page = document.getElementById("cardpage-"+type);
        page.scrollIntoView({
          behavior: "smooth",
          block: "nearest"
        });
        pagino.setPage(type);
      }
    };

以及它的价值，pagino（只是跟踪页面）：

    const [pages, setPages] = useState([]);

    const pagino = useMemo((counting = 0) => {
      const _ = new Pagino({
        showFirst: false,
        showLast: false,
        siblingCount: 10,
        boundaryCount: 0,
        onChange: (page, count) => setPages(_.getPages())
      });
      _.setCount(counting);
  
      return _;
    }, []);

所以结果仍然相当简单：我有几个呈现的链接对应于在元素“pagino-container”内呈现的不同页面。当我单击其中一个链接时，在 div 内它会滚动到单击的页面。

它就像我现在拥有的那样工作。如果它那么优雅，或者只是我不知道。

但现在奇怪的事情。如果我开始向渲染的链接添加样式，并且我说的是简单的 1px 边框和一些填充，突然它会中断，链接上的点击什么都不做......（抱歉重新措辞，点击实际上是注册的，只是滚动不再被触发，这很奇怪，因为 id 或任何东西都没有改变，滚动内容的定位也没有改变）它是通过 CSS 加载还是通过内联样式加载都没有关系。

让它变得更奇怪一些。如果只有一个按钮有边框，则滚动仅适用于第一次单击任何按钮。如果所有按钮都有边框，则不会发生任何滚动。如果我只是通过开发工具添加样式，无论如何它都会继续工作..

有谁知道是什么原因造成的？

**编辑：好吧，显然 Link 元素中的条件被镜像了，这似乎是造成它的原因。造型与它的关系超出了我的范围

标签： cssreactjspaginationreact-scroll