useRef() 钩住自定义组件

Question

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

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

'refs' 被声明如下，使用 useRef 钩子：

  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需要转发。

一个例子是这样的：

// 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应该将其分配到哪里。