如何将动态元素添加到从 React ref 中提取的特定 Html 节点？
我正在使用 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查找类似的输出，
我无法为图像 > 父宽度动态创建节点。我已经能够捕获宽度并添加溢出，但如何将按钮添加到具有样式的节点。
哈士奇WWW1回答
-
翻阅古今
我们可以尝试在 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;};现在您可以使用它来创建标记。
随时随地看视频慕课网APP
相关分类
Html5