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" })
  }

问题是 'current' 键始终未定义。当我做那样的事情时：

<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() 挂钩自定义组件

useRef() Hook on a custom component

javascript

reactjs

react-hooks

use-ref