DOM манипулирование элементами вне реактивного компонента - PullRequest
Новая
       6

DOM манипулирование элементами вне реактивного компонента

0 голосов
/ 29 ноября 2018

Я сделал недопустимую боковую панель в реакции, но внутри компонента боковой панели 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%';
    }
  }

1 Ответ

0 голосов
/ 29 ноября 2018

Если вы не можете использовать 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%')}
/>
...