Javascript 父组件中div id的滚动位置

使用ReactJS和GatsbyJS（v2），我有一个

标题

组件，它位于父

布局

组件的

div id=“outerContainer”

上方

要在

100px

下方的滚动位置切换类，我通常会使用

window.scrollY<100

但是，由于样式为

溢出：隐藏的body类和样式为
溢出：滚动的
的
outerContainer
，因此
窗口的滚动位置不会更改

我如何从子组件定义
outerContainer.scrollY<100
，同时引用父组件的
outerContainer
作为滚动位置

Layout.js

const Layout = ({ children }) => (
  <div>
    <div id="outerContainer" ref={el => (this.outerContainer = el)}>
      <div className="content">{children}</div>
    </div>
    <Header />
  </div>
);

class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      navScrolled: true
    };
    this.onScroll = this.onScroll.bind(this);
  }

  componentDidMount() {
    document.addEventListener('scroll', () => {
      const navScrolled = outerContainer.scrollY < 100;
      if (navScrolled !== this.state.navScrolled) {
        this.onScroll(navScrolled);
      }
    });
  }
  componentWillUnmount() {...}
  ...
}

const布局=（{children}）=>(
（this.outerContainer=el）}>
{儿童}
);

Header.js

const Layout = ({ children }) => (
  <div>
    <div id="outerContainer" ref={el => (this.outerContainer = el)}>
      <div className="content">{children}</div>
    </div>
    <Header />
  </div>
);

class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      navScrolled: true
    };
    this.onScroll = this.onScroll.bind(this);
  }

  componentDidMount() {
    document.addEventListener('scroll', () => {
      const navScrolled = outerContainer.scrollY < 100;
      if (navScrolled !== this.state.navScrolled) {
        this.onScroll(navScrolled);
      }
    });
  }
  componentWillUnmount() {...}
  ...
}

类头扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
导航滚动：真
};
this.onScroll=this.onScroll.bind（this）；
}
componentDidMount（）{
document.addEventListener（'scroll'，（）=>{
常量navScrolled=outerContainer.scrollY<100；
if（navScrolled！==this.state.navScrolled）{
this.onScroll（导航滚动）；
}
});
}
componentWillUnmount（）{…}
...
}

我的第一个想法是我应该在
layout.js
中执行函数，并使用
props
传递状态。这是最好的选择还是可能有其他方法可以处理
header.js
中的所有内容？
您的第一个想法是正确的，父类是
onScroll
回调的合适位置，因为滚动位置是整个布局的属性，而不是仅使用它的header的属性

另外，通过将
onScroll
保留在父类中，您还可以将它传递给outerContainer，如果它在开发过程中成长为单独的类，这很可能会发生