如何將動態元素添加到從 React ref 中提取的特定 Html 節點？

Question

我正在使用 React 在瀏覽器上呈現時使用 ref 回調來獲取元素，然后在子元素超過父元素的情況下對其進行轉換，React 不會解析內容，而是調用 API ，因此必須手動解析。

注意 - 目前我正在通過 react ref 回調獲取元素，並嘗試通過普通 Js 進行修改，以防反應組件發生重新渲染（如果是，我們如何在 React 中進行）或者如果我們使用普通 JS 修改 DOM好嗎？

 (function (e) { // how to add icon at the end of the image if the size of the image is greater then container }})(window,document) const parent = element.getBoundingClientRect(); const imgTags = element.querySelectorAll("img"); imgTags.forEach(imgTag => { const imgBoundingRect = imgTag.getBoundingClientRect(); if (imgBoundingRect.width > parent.width) { const parent = imgTag.parentNode; const wrapper = document.createElement('div'); wrapper.classList.add(styles.horizontalScroll); parent.replaceChild(wrapper, imgTag); wrapper.appendChild(imgTag); } });

 .horizontalScroll { overflow-x: auto; } But i am not sure how to add icon instead of scroll bar to the node and then clicking on the icon moves it instead of scroll

 <html> <body> <script> </script> <div style="width: 10px;border: 1px solid red" > <p>Mine MIne;GGGG;8 If <img height="84px" src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQGnVCSgGcosHQqtLDK2s8ZdOaZxNcntg8vk2kHgygqP--Rbtdd&usqp=CAU" style="vertical-align:middle" width="510px"> then the value of </p> </div </body> </html>

像這樣尋找output 加載圖像時僅使用普通 JS 我無法為圖像>父寬度動態創建節點。 我已經能夠捕獲寬度並添加溢出，但是如何將按鈕添加到具有樣式的節點。

更新：獲取 Ref 的反應代碼

  <div dangerouslySetInnerHTML={createMarkup(myContent)} // this is a set of <p> tags which may or may not contain images inside which comes in via server. those images can sometime move out of view . due to no style prop attached
       className={classNames(styles.data, externalStyle)}
       ref={(input) => {
         if (input) {
           myJSFunction(input); // this is the Input
         }
       }}/>

Answer 1

我們可以嘗試在 React 上下文中添加動態元素。

 export const overFlowIcon = (element) => { const oldId = element.querySelectorAll('#myID'); // add someId inside to icon and check may Be in case content re renders in React setTimeout(() => { const pDiv = element.getBoundingClientRect(); const imgTags = element.querySelectorAll("img"); imgTags.forEach(imgTag => { const imdDiv = imgTag.getBoundingClientRect(); if (imdDiv.width > pDiv.width) { const parent = imgTag.parentNode; parent.style.width = '100%'; const cont = document.createElement('div'); const wrap = document.createElement('div'); cont.classList.add('stickycontainer'); wrap.classList.add('horizontalScroll'); container.appendChild(wrap); parent.replaceChild(container, imgTag); wrap.appendChild(imgTag); const newE = document.createElement('span'); // creating icon newE.onclick = (event) => (element.scrollBy(100, 0); event.stopPropagation();) newE.classList.add('arrow'); // styling a problem can fix wrap.appendChild(newE); } }); }, 0); };

 .stickycontainer position: relative; }.horizontalScroll { overflow-x: auto; display: flex; }.arrow { position: absolute; left: 80%; top: 50%; border: solid #000; border-width: 0 3px 3px 0; display: inline-block; padding: 3px; cursor: pointer; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); }

在這種情況下，我們確保元素在視圖中，然后使用 JS 進行轉換，同時為了防止重新渲染的影響，我們可以將 id 添加到任何元素，然后如果 React Rerenders 我們可以檢查 id 是否存在，我們可以防止通過防止重新渲染的影響，整個方法在那里完全運行，或者可以向方法添加額外的 arg。

更新添加 React Ref 的帖子，因為內容以字符串的形式出現，您可以使用 DOM 解析器將其轉換為您的格式並返回字符串，然后在 React Context 本身中有邏輯，例如

 export const horizontalOverflow = (content) => { const parser = new DOMParser(); const doc = parser.parseFromString(content, 'text/html'); const element= doc.body; if (element) { const imgTags = element.querySelectorAll("img"); imgTags.forEach(imgTag => { const parent = imgTag.parentNode; const wrapper = document.createElement('span'); wrapper.classList.add(horizontalscrolling); parent.replaceChild(wrapper, imgTag); wrapper.appendChild(imgTag); }); } return element.outerHTML; };

現在您可以使用它來創建標記。

如何將動態元素添加到從 React ref 中提取的特定 Html 節點？

問題描述

1 個解決方案

解決方案1
2 已采納 2020-04-12 19:26:34

如何將動態元素添加到從 React ref 中提取的特定 Html 節點？

問題描述

1 個解決方案

解決方案1 2 已采納 2020-04-12 19:26:34

解決方案1
2 已采納 2020-04-12 19:26:34