我正在使用 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 关注
- 138 浏览
添加回答
举报
0/150
提交
取消