Как добавить ссылки на стиль Википедии в мое приложение ReactJS?
Я хочу создать надстрочные теги, которые при нажатии перенаправляют пользователя на ссылки, как в Википедии.
Теперь я создал надстрочный тег и попытался установить для него атрибут href, но ничего не происходит, когда я нажимаю, хотя элемент проверки показывает, что атрибут href был правильно применен к тегу sup.
Вот что я пробовал:
useEffect(() => {
let sup = document.querySelectorAll("sup");
if (sup && sup.length > 0 ) {
sup[0].setAttribute("href", 'https://www.google.com');
console.info(sup, "sup")
}
}, [articles])
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Похоже, вы добавляете href к тегу sup, что не сработает. Работает только с тегом a.
Кроме того, если я что-то не упустил, вы слишком усложняете ситуацию, используя JS для создания ссылки/тега. Вы можете просто поместить ссылку внутри тега a в вашем HTML:
lorem ipsum <sup><a href = "https://example.com">link</a></sup>
Ах хорошо. Тем не менее, вам нужно добавить href к тегу a, а не к тегу sup. Таким образом, вы также можете создать тег a в своем коде JS и вставить его в теги sup. Вы можете использовать существующий текст внутри тега sup, чтобы он стал текстом внутри тега a.
Элемент sup не имеет атрибута href и не может перемещаться.
Вам нужно ввести внутри тега привязки href ссылки, по которой вам нужно перейти.
let sup = document.querySelectorAll("sup");
if (sup && sup.length > 0) {
sup[0].innerHTML = `<a href = "https://www.google.com">${sup[0].innerHTML}</a>`
}link<sup>1</sup>Главное, что вам нужно изменить в своем коде, — это обернуть тег <sup> в тег <a>, чтобы затем вы могли добавить атрибут href к тегу <a>, а затем при щелчке пользователя вы могли успешно разрешить пользователю пройти по ссылке, которую вы предоставите.
Например:
useEffect(() => {
...
const anchorEl = document.createElement("a");
anchorEl.setAttribute("href", 'https://www.google.com');
const supEl = sup[0]
anchorEl.appendChild(supEl);
supEl.parentNode.replaceChild(anchorEl, supEl);
// supEl.replaceWith(anchorEl) // it does the same as above line, but very old browsers may not support *replaceWith* method.
...
},[articles])
Также здесь вы можете прочитать о том, что может помочь вам лучше понять теги <sup> и почему вы должны заключать их в тег <a>:
Превратите все элементы <sup> в ссылки
И последнее, что я хочу отметить, что прямое манипулирование элементами DOM через useEffect хук React не рассматривает в первую очередь как способ внесения таких изменений в DOM, а React хорошо спроектирован для обновления DOM через JSX и Virtual DOM, когда состояние или свойства компонента изменены, что является поведением React по умолчанию. Таким образом, вам не нужно делать много вещей, когда React уже может легко сделать это за вас, и если вы правильно организуете свои компоненты, логику и свой код, вы можете получить максимальную отдачу от React.
Спасибо за ответ. Теги sup динамически поступают из виджетов из CMS. Итак, я должен манипулировать ими в своем JS-коде.