我試圖做的是在我獲取的動態 html 上按 className 獲取 html 標記，但它回傳未定義。如果我嘗試 getElementByClassName("main-page") 它會起作用，因為該類不是動態的
const HomePage = () => {
const [pageData, setPageData] = useContext(PageContext)
useEffect(() => {
const allImages = document.getElementsByClassName("wp-block-column")
console.log([...allImages])
}, [])
//render fronpage
const renderMainPage = () => {
//map the data and check for the site url (www.siteurl.com = front page)
if (pageData) {
return pageData.map(page => {
if (window.location.origin "/" === page.link) {
return <section dangerouslySetInnerHTML={{ __html: page.content.rendered }}></section>
}
})
}
}
return (
<h1 className="main-page"">{renderMainPage()}</h1>
)
}
export default HomePage
uj5u.com熱心網友回復：
const elementsRef = useRef(data.map(() => createRef()));
您可以動態創建 ref 以訪問或創建隨機 iniNumber 陣列，然后在選擇它們時分配給您的元素
uj5u.com熱心網友回復：
根據我在背景關系中的 pageData 中看到的問題，可能您對背景關系的 pageData 的默認值是 false 并且 renderMainPage() 并沒有比第一個“if”陳述句更進一步
但它不喜歡使用檔案選擇器，而是在 React 中使用 refs。同樣從命名中，我看到您正在嘗試獲取影像而不是 dom 節點，但是通過這種邏輯，您將獲得 dom 節點。我確信有更好的方式/流程來訪問您需要的影像，而不是在節點中查找它們。
uj5u.com熱心網友回復：
const allImages = document.getElementsByClassName("wp-block-column")[0].children
console.log("allImages ",allImages )
uj5u.com熱心網友回復：
你可以使用這個 useLayoutEffect 的函式，你可以像這樣修改你的代碼，
useLayoutEffect(()=> {
document.getElementsByClassName("yourclassname")
})
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/427813.html
標籤：javascript html 反应