Javascript 是否有更好的方法来处理窗口属性&；React/Redux中的子组件？

所以我有一个

组件。根据页面，它加载到不同的子组件中。其中，它们可能有标签，也可能没有

这改变了我希望滚动的工作方式，因此也改变了滚动的标记

我基本上最终确保每个子组件都有一个类似

然后，在我的

组件中，我执行了以下操作：

componentDidMount() {

  this._updateHeight();
  window.addEventListener('resize', this._updateHeight, false);
},

componentDidUpdate() {
  this._updateHeight();
},

_updateHeight() {
  var container = document.getElementById('scroll-container');

  if (container ) {
    let height = window.innerHeight - container.getBoundingClientRect().top;
    container.style.height = height + 'px';
  }
},

我知道有一些类似于

getBoundintClientRec

的帮助程序，我稍后将使用它们。现在我只是想知道一般流程

我在想我可以制作一个组件，它是

滚动容器

，可以在我需要的地方包装它，但是我需要经常做类似这样的事情

<ScrollContainer {...this.props}>
  <ChildIHadThereAnyway>
</ScrollContainer>

同时，组件“应该”了解窗口吗

是我目前的最高级别，所以我认为在那里很好，但对孩子之类的问题不太确定

---

基本上不确定什么是连接全局窗口大小和组件位置方面的最佳方法。

此方法并不完美，但对我来说效果很好

我的代码有根组件

应用程序

，如果您正在使用

反应路由器

，您可能也有一个，否则添加它很容易

我也有用于管理窗口属性（如屏幕分辨率或方向）的减缩器和操作。让我们调用它们

windowReducer

和

windowActions

在根组件中，我已使用以下内容注册事件处理程序：

componentDidMount() {
  window.addEventListener('resize', this.onWindowResolutionChange, false);
}

onWindowResolutionChange() {
  windowActions.onResolutionChange({
    width: window.innerWidth,
    height: window.innerHeight
  });
}

与其他redux操作一样，onResolutionChange将操作分派到windowReducer，在那里设置新的窗口宽度和高度

所以，要将它们放入组件中，您只需将它们作为其他道具从容器的

状态传递出去即可

这种方法中最糟糕的情况是，
状态
更改太频繁，导致组件的额外重新渲染。通常，您使用的函数都是避免它的。如果您的一个组件需要立即更改，而另一个组件需要取消公告，那么您可能会以两个不同的操作结束（就像我所做的那样），将不同的值设置为state（
width
和
debouncedWidth
）
 我应该注意的是，额外的技巧是高度是动态的，基于渲染后的情况，这就是为什么我不能只使用，它似乎执行
方法。因此，使用此解决方案，您建议窗口大小为store prop。然后要考虑元素的特定位置（即my
scroll container
），您可以使用组件，该组件将根据存储尺寸+自身尺寸/位置处理自身的高度