我正在使用 React 在瀏覽器上渲染時使用 ref 回調來獲取元素，然后在子級超過父級時對其進行轉換，內容不會由 React 解析，而是通過 API 調用，因此必須手動進行解析。注意 - 目前我正在通過 React ref 回調獲取元素，并嘗試通過純 Js 進行修改，以防 React 組件發生重新渲染（如果是，我們如何在 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>加載圖像時僅使用純 JS查找類似的輸出，我無法為圖像 > 父寬度動態創建節點。我已經能夠捕獲寬度并添加溢出，但如何將按鈕添加到具有樣式的節點。
1 回答
翻閱古今
TA貢獻1780條經驗 獲得超5個贊
我們可以嘗試在 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 重新渲染，我們可以檢查 id 是否存在，我們可以防止通過防止重新渲染的影響，整個方法一起運行，或者可以向該方法添加一個額外的參數。
更新添加 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;
};
現在您可以使用它來創建標記。
- 1 回答
- 0 關注
- 209 瀏覽
添加回答
舉報
0/150
提交
取消