reactjs - Reactで現在の参照を見つける方法

Question

現在の参照が何であるかを調べようとしています。この背後にある理由は、ユーザーが現在のセクションではないセクションに入ろうとするたびにポップアップをトリガーできるようにするためです。

const section1= useRef(null);
const section2= useRef(null);
const section3= useRef(null);

セクションがあります：

const sections = [
    section1,
    section2, 
    section3
];

私のナビ内には、このようなリンクがあります

<li><a href="#section1">Section1</a></li>
<li><a href="#section2">Section2</a></li>
<li><a href="#section3">Section3</a></li>

そして最後に私はポップアップを持っています:

const TestPopup = () => {
    return <Modal
        ariaHideApp={false}
        style={customStyles}
        isOpen={openPopup}
    >
        Test
           <div>
            <PopupButton className="standard-button" onClick={() => {
                setOpenPopup(false)
            }}>Cancel</PopupButton>
            <PopupButton onClick={() => {
            }}>OK</PopupButton>
           </div>
    </Modal>
}

次に、jsx の戻り値内で、次のように各セクションを呼び出します。

setOpenPopupいつでも真になりたいsection pressed IS NOT current.section

そのため、現在のセクションを保存できる setRef 状態を作成し、それを各<a>ナビゲーション リンク内で呼び出すことを考えていました。

このようなもの：<li><a onClick={IF REF PRESSED IS NOT THE CURRENT REF SHOW POPUP} href="#section1">Section</a></li>