javascript - 不工作在 React 中单击向左或向右滚动产品

Question

我有一个水平显示的产品列表。

我需要点击左或右 btns，将下一个产品滚动到视图中。

这是我的 scrollProducts 功能不起作用：

  const scrollProducts = isRight => {
    const $document = document.querySelector(".prodcuts")
    if (!$document) {
      return
    }
    productsRef.current.scrollLeft = isRight
      ? productsRef.current.scrollLeft + $document.clientWidth
      : productsRef.current.scrollLeft - $document.clientWidth
  }

JSX 部分：

      <section className="prodcuts" ref={productsRef}>
        <div>
          <button onClick={() => scrollProducts(false)}>Left</button>
          <button onClick={() => scrollProducts(true)}>Right</button>
        </div>
        <Row styles={styles.productCards}>
          {site.siteMetadata.data.map(product => (
            <ProductCard key={product.name} {...product} />
          ))}
        </Row>
      </section>

有什么建议吗？

标签： javascriptreactjs