Question

我正在尝试创建一个导航栏，当用户单击链接之一时，页面将滚动到某个部分。在上面的代码中，每个元素都是我页面的一部分：

    <Navbar scrollFunc={scrollToRef} />      
    <Mainlogo ref={mainLogoRef} />
    <Sales  ref={salesRef} />
    <Introduction ref={introductionRef} />
    <Blog ref={blogRef} />
    <Footer />

使用useRef钩子将'refs'声明为以下对象：

  const mainLogoRef = useRef(null)
  const salesRef = useRef(null)
  const introductionRef = useRef(null)
  const blogRef = useRef(null)

我用来滚动的功能如下：

  const scrollToRef = ref => {
    window.scrollTo({ top: ref.current.offsetTop, behavior: "smooth" })
  }

问题在于，“当前”键始终未定义。当我做这样的事情：

<div ref={salesRef}> <Sales  /><div>

或

<section ref={salesRef}> <Sales  /><section>

一切正常。我假设'ref'仅适用于html'pure'标签。有什么方法可以在自定义组件中使用'useRef'挂钩？

免责声明：对不起，英语不好，我不是母语人士。

Answer 1

在自定义组件上，ref必须为forwarded。

示例如下：

// inside Sales.js
const Sales = (props, ref) => (
  <div ref={ref}> // assigns the ref to an actual DOM element, the div
    /* anything you want to render here */
  </div>
)

export default React.forwardRef(Sales);

这是因为ref（通常）是对DOM元素的引用。 React组件可以呈现多个DOM元素，因此您需要明确说明ref的分配位置。

useRef（）挂钩自定义组件

1 个答案: