DOM-манипуляции с элементами вне компонента React

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

  if (this.state.sideBarOpen === false) {
    for (let i = 0; i < document.getElementsByClassName('u-session-width').length; i++) {
      document.getElementsByClassName('u-session-width')[i].style.width = 'calc(100vw - 59rem)';
    }
  } else {
    for (let i = 0; i < document.getElementsByClassName('u-session-width').length; i++) {
      document.getElementsByClassName('u-session-width')[i].style.width = '98%';
    }
  }

reactjs dom-manipulation

29.11.2018 10:24

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

322

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Если вы не можете использовать React для рендеринга остальной части страницы, я не знаю ни одного более чистого API для выполнения того, что вам нужно.

Я бы предложил отделить эти побочные эффекты от самого компонента: например, вы могли бы добавить два реквизита обратного вызова, называемые onHide и onShow, которые вызываются при изменении состояния компонента, а затем поместить в них код, который управляет DOM.

if (this.state.sideBarOpen === false) {
  this.props.onHide();
} else {
  this.props.onShow();
}

И где вы визуализируете компонент:

const setSessionWidth = (width) => {
  for (let i = 0; i < document.getElementsByClassName('u-session-width').length; i++) {
    document.getElementsByClassName('u-session-width')[i].style.width = width;
  }
};

<Sidebar
  ...
  onShow = {() => setSessionWidth('calc(100vw - 59rem)')}
  onHide = {() => setSessionWidth('98%')}
/>

29.11.2018 11:11

Другие вопросы по теме

Сохранять манипуляции с html dom при обновлении

Проблема с бесконечным циклом при манипулировании DOM

Использование insertAdjacentHTML () для добавления частичного HTML

Как удалить <li> из списка с помощью javascript

Манипуляция JS DOM 'mouseleave' неожиданно запускается в браузере Safari

Предотвращение распространения события, когда у меня есть интерактивный элемент div в большей интерактивной области?

Какой обработчик событий я должен использовать для манипуляций с DOM на сайте React с отложенной загрузкой, таком как Instagram?

Как изменить ширину или другие стили css для div в angular 5, нажав кнопку?

Как позволить объекту переместиться / или где ошибка?

Выделение активной вкладки с помощью vanilla JS

DOM-манипуляции с элементами вне компонента React

Ответы 1

Другие вопросы по теме

Похожие вопросы