猿问

如何将动态元素添加到从 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查找类似的输出，

我无法为图像 > 父宽度动态创建节点。我已经能够捕获宽度并添加溢出，但如何将按钮添加到具有样式的节点。

哈士奇WWW
浏览 139回答 1
1回答

翻阅古今

我们可以尝试在 React 上下文中添加动态元素。export const overFlowIcon = (element) => {&nbsp; const oldId = element.querySelectorAll(‘#myID’); // add someId inside to icon and check may Be in case content re renders in React&nbsp;&nbsp; &nbsp; setTimeout(() => {&nbsp; &nbsp; &nbsp; const pDiv = element.getBoundingClientRect();&nbsp; &nbsp; &nbsp; const imgTags = element.querySelectorAll("img");&nbsp; &nbsp; &nbsp; imgTags.forEach(imgTag => {&nbsp; &nbsp; &nbsp; &nbsp; const imdDiv = imgTag.getBoundingClientRect();&nbsp; &nbsp; &nbsp; &nbsp; if (imdDiv.width > pDiv.width) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const parent = imgTag.parentNode;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; parent.style.width = '100%';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const cont = document.createElement('div');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const wrap = document.createElement('div');&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; cont.classList.add(‘stickycontainer');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; wrap.classList.add(‘horizontalScroll');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; container.appendChild(wrap);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; parent.replaceChild(container, imgTag);&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; wrap.appendChild(imgTag);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const newE = document.createElement('span'); // creating icon&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; newE.onclick = (event) => (element.scrollBy(100, 0); event.stopPropagation();)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; newE.classList.add(‘arrow'); // styling a problem can fix&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; wrap.appendChild(newE);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; }, 0);};.stickycontainer&nbsp; position: relative;}.horizontalScroll {&nbsp; overflow-x: auto;&nbsp; display: flex;}.arrow {&nbsp; position: absolute;&nbsp; left: 80%;&nbsp; top: 50%;&nbsp; border: solid #000;&nbsp; border-width: 0 3px 3px 0;&nbsp; display: inline-block;&nbsp; padding: 3px;&nbsp; cursor: pointer;&nbsp; transform: rotate(-45deg);&nbsp; -webkit-transform: rotate(-45deg);}在这种情况下，我们确保元素在视图中，然后使用 JS 进行转换，同时为了防止重新渲染的效果，我们可以将 id 添加到任何元素，然后如果 React 重新渲染，我们可以检查 id 是否存在，我们可以防止通过防止重新渲染的影响，整个方法一起运行，或者可以向该方法添加一个额外的参数。更新添加 React Ref 后，由于内容以字符串形式出现，您可以使用 DOM 解析器将其转换为您的格式并返回字符串，然后在 React Context 本身中添加逻辑，例如export const horizontalOverflow = (content) => {&nbsp; const parser = new DOMParser();&nbsp; const doc = parser.parseFromString(content, 'text/html');&nbsp; const element=&nbsp; doc.body;&nbsp; if (element) {&nbsp; &nbsp; const imgTags = element.querySelectorAll("img");&nbsp; &nbsp; imgTags.forEach(imgTag => {&nbsp; &nbsp; &nbsp; const parent = imgTag.parentNode;&nbsp; &nbsp; &nbsp; const wrapper = document.createElement('span');&nbsp; &nbsp; &nbsp; wrapper.classList.add(horizontalscrolling);&nbsp; &nbsp; &nbsp; parent.replaceChild(wrapper, imgTag);&nbsp; &nbsp; &nbsp; wrapper.appendChild(imgTag);&nbsp; &nbsp; });&nbsp; }&nbsp; return element.outerHTML;};现在您可以使用它来创建标记。
0
随时随地看视频慕课网APP

相关分类

Html5
我要回答