Как назначить уникальный постоянный идентификатор каждому отдельному тегу HTML и зафиксировать измененный идентификатор ⇐ CSS

[Anonymous]

У меня есть пример использования, когда мне нужно назначить уникальный и постоянный уникальный идентификатор каждому HTML-тегу на моей странице.
Справочная информация:
Я создал элемент блока, поэтому все на веб-странице теперь является элементом .
Элемент блока определяется следующим образом: это

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

export const Block = ({ children, className = "", id = "", ...props }) => {
const handleClick = () => {
console.log("Clicks working");
};

const prevChildrenRef = useRef(children);

useEffect(() => {
if (prevChildrenRef.current !== children) {
console.log(`Content changed for id ${id}`);
prevChildrenRef.current = children;
}
}, [children, id]);

console.log(`Rendering Block with ID: ${id}`);

return (

{children}

);
};

Вот как я использую свой элемент блока, аналогично на всей странице, все является блоком на атомарном уровне.
использование:

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

{start.name}
{start.headline}

Мне хотелось бы создать уникальный и постоянный идентификатор для каждого блока, чтобы он оставался неизменным даже после обновления страницы.
Что Я пробовал:
Я пытался назвать каждый блок раздела с помощью рекурсии, поэтому верхний корневой элемент будет иметь уникальный идентификатор в качестве имени раздела, например здесь, начало, как мы перейдите к детям, они будут иметь идентификаторы
_1, _2, _1_1 (внуки родителя) и так далее.
Вот код.< /p>

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

export const assignIds = (element, idPrefix = prefix) => l{
let counter = 1;

const childrenWithIds = React.Children.map(element.props.children, (child) => {
if (React.isValidElement(child)) {
const newIdPrefix = `${idPrefix}_${counter}`;
counter++;
return React.cloneElement(
child,
{ id: newIdPrefix, key: newIdPrefix },
assignIds(child, newIdPrefix),
);
}
return child;
});

return React.cloneElement(element, { id: idPrefix }, childrenWithIds);
};

Хотя этот подход работает, проблема, с которой я сталкиваюсь, заключается в том, что при изменении значения {start.name} или {start.headline} я хочу получить только его идентификатор. блок, под которым он находится, а не родительский или родительский. Прямо сейчас моя реализация кода также запускает консоль — console.log(`Содержимое изменено для id ${id}`); (в блоке) определено внутри useEffect для родителя, а также для бабушек и дедушек.
Где мне нужна помощь
В конечном счете, я хочу зафиксировать идентификатор только того блока, который изменяется, без участия каких-либо предков, чтобы я мог динамически передавать CSS для динамического изменения его стиля.>

Подробнее здесь: https://stackoverflow.com/questions/785 ... -capture-t