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

对React组件之外的元素进行DOM操作

1 个答案: