React 组件之外的元素的 DOM 操作

【问题标题】：DOM manipulation of elements outside of a react componentReact 组件之外的元素的 DOM 操作
【发布时间】：2019-05-01 07:34:30
【问题描述】：

我在 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

【解决方案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%')}
/>

【讨论】：