我想創建上標標簽，如果點擊它，會將用戶重定向到參考資料，就像在維基百科中一樣。
現在，我創建了上標標記并嘗試為其設定href屬性，但是當我單擊時沒有任何反應，即使檢查元素顯示該href屬性已正確應用于sup標記。
這是我嘗試過的：
useEffect(() => {
let sup = document.querySelectorAll("sup");
if(sup && sup.length > 0 ) {
sup[0].setAttribute("href", 'https://www.google.com');
console.log(sup, "sup")
}
}, [articles])
uj5u.com熱心網友回復：
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>uj5u.com熱心網友回復：
您似乎正在添加href標簽sup，這不起作用。僅適用于a標簽。
此外，除非我遺漏了什么，否則您使用 JS 創建鏈接/標簽會使事情變得過于復雜。您可以簡單地將鏈接放在 HTML 中的 a 標記內：
lorem ipsum <sup><a href="https://example.com">link</a></sup>
uj5u.com熱心網友回復：
您需要在代碼中更改的主要重要事項是將標簽包裝在<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>元素轉換為鏈接
最后我要注意的是，通過useEffect鉤子直接操作 DOM 元素并不是 React 最初考慮的對 DOM 進行此類更改的方式，并且 React 設計得很好，可以通過 JSX 和 Virtual DOM 更新 DOM，當組件的 state 或 props 被更改，這是 React 默認行為。因此，當 React 已經可以輕松地為您完成時，您不必做太多事情，并且如果您完全正確地組織組件、邏輯和代碼，您可以充分利用 React。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/515650.html
上一篇：未呈現空白/白色螢屏