javascript - useRef() Hook 自定义组件

Question

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

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

'refs' 被声明为如下，使用 useRef 钩子(Hook):

  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” Hook ？

免责声明:抱歉英语不好，我不是母语人士。

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 的位置。应分配给。