DOM 在 React 组件之外操作元素

Question

我在 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%';
    }
  }

Answer 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%')}
/>

DOM 在 React 组件之外操作元素

DOM manipulation of elements outside of a react component

reactjs

dom-manipulation