Возврат идентификатора компонента, который находится во вьюпорте ⇐ CSS

[Anonymous]

Я хочу вернуть значение компонента, который сейчас находится в области просмотра.

Для этого я обратился к некоторым документам и подумал, что смогу сделать это с помощью Ant Design.
Функция, которую я ссылался на Ant Design, — это Anchor. Я хочу получить значение key тега Anchor.

Существует документ, объясняющий его использование, но я не знаю, как его использовать, чтобы получить значение текущего компонента.
Я создал три компонента в своих кодах. И хочу показать их номер вверху.

Могу ли я узнать, как это сделать?
Извините за трудный для понимания вопрос, но я уверен, что вы сможете лучше понять, если увидите мой код или CodeSandBox ниже. Спасибо
код:

Код: Выделить всё

import styled from "styled-components";
import { Anchor } from "antd";
import { useState } from "react";

export default function App() {

//tried to use these, but failed
const [currentView, setCurrentView] = useState();
console.log(currentView);
window.addEventListener("scroll", () => {});

return (


currentcomponent : {currentView}
{currentView}

components 1

components 2

components 3


);
}

const Wrap = styled.div`
border: 3px solid black;
width: 100vw;
box-sizing: border-box;

.fixed {
position: sticky;
top: 0;
}

.compo1 {
border: 3px solid red;
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 70vh;
}

.compo2 {
border: 3px solid blue;
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 70vh;
}

.compo3 {
border: 3px solid green;
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 70vh;
}
`;

CodeSandBox:
CodeSandBox

Подробнее здесь: https://stackoverflow.com/questions/754 ... n-viewport