Как добавить динамический c элемент к конкретному Html узлу, извлеченному из ссылки на React? - PullRequest
Новая
       0

Как добавить динамический c элемент к конкретному Html узлу, извлеченному из ссылки на React?

3 голосов
/ 10 апреля 2020

Я использую React, чтобы получить элемент с помощью обратного вызова ref при рендеринге в браузере, а затем преобразовать его в случае, если дочерний объект превышает родительский, содержимое не анализируется React, но приходит вызов API, поэтому анализ должен быть вручную.

Примечание - в настоящее время я получаю элемент через обратный вызов реагирования и пытаюсь изменить через обычный Js, сработает ли это в случае повторного рендеринга с компонентом реагирования (если да, то как можно мы делаем это в React) или если мы модифицируем DOM, используя обычный JS, это нормально? 

(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>

Ищете вывод, подобный этому enter image description here, используя просто Plain JS при загрузке изображения, я не могу создавать узлы на лету для изображений> родительской ширины. Я был в состоянии захватить ширину и добавить переполнение, но как добавить кнопку к узлу со стилем.

Обновление: код реакции для получения ссылки 

  <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
         }
       }}/>

1 Ответ

2 голосов
/ 12 апреля 2020

Мы можем попробовать что-то вроде этого добавить динамический c элемент в контексте 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, также для предотвращения эффекта рендеринга Re мы можем добавьте id к любому элементу, а затем, если React Rerenders, мы можем проверить id, если он существует, мы запрещаем запускать весь метод целиком, предотвращая эффект повторного рендеринга / или можем добавить дополнительный аргумент к методу.

Обновление После добавления React Ref, так как контент представлен в виде строки, вы можете использовать DOM-парсер, чтобы преобразовать его в ваш формат и обратно в строку, а затем иметь лог c в самом 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;
};

Теперь вы можете использовать его для создания разметки.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...