时间戳

首页 > 解决方案 > 如何将动态元素添加到从 React ref 中提取的特定 Html 节点？

javascript - 如何将动态元素添加到从 React ref 中提取的特定 Html 节点？

问题描述

我正在使用 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>

在加载图像时仅使用普通 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
         }
       }}/>

标签： javascripthtmlcssreactjs

解决方案

我们可以尝试像这样在 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;
};

现在您可以使用它来创建标记。

推荐阅读