web-dev-qa-db-ja.com

カスタムコンポーネントのuseRef（）フック

ユーザーがリンクの1つをクリックすると、ページがいくつかのセクションにスクロールするナビゲーションバーを作成しようとしています。上記のコードでは、各要素は私のページのセクションです：

    <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」フックを使用する方法はありますか？

免責事項：悪い英語でごめんなさい、私はネイティブスピーカーではありません。

javascriptreactjsreact-hooksuse-ref
2
yuridamata

カスタムコンポーネントでは、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要素への参照であるためです。 A Reactコンポーネントは複数のDOM要素をレンダリングできるため、refを割り当てる場所を明示する必要があります。

3
Jackyef