Javascript ReactJS组件在视口中时淡入

我正在尝试用ReactJS做淡入式博客文章。我最初的想法是为每个

组件添加滚动事件，并检查它是否在浏览器视图中（

window.scrollY+window.innerHeight>this.post.offsetTop

）

class Post扩展了React.Component{
建造师（道具）{
超级（道具）；
this.scrollHandler=this.scrollHandler.bind（this）；
此.state={
法丹：“，
};
}
componentDidMount（）{
window.addEventListener（'scroll'，this.scrollHandler）；
this.scrollHandler（）；
}
scrollHandler（）{
if（window.scrollY+window.innerHeight>this.post.offsetTop）{
这是我的国家({
fadeIn:styles.fadeIn，
});
window.removeEventListener（'scroll'，this.scrollHandler）；
}
}
render（）
返回(
{this.post=div；}}>
真棒的文章
);
}
}

fadeIn

样式只是更改元素的不透明度。一切正常。 现在的问题是，有没有更好的方法？我不喜欢为每个元素创建滚动事件。在我看来，应该只有一个滚动事件（例如在父组件中），它将提供窗口位置数据，并且组件应该将其与其顶部位置进行比较。但不幸的是，我不知道如何用ReactJS实现这一点

构造函数（道具）{
    constructor(props){
    super(props);
    this.state = {
      isScroll: false
    }
}

handleScroll = () => {
    let winHeight = window.innerHeight;

    if (window.pageYOffset > winHeight){
      this.setState({
        isScroll: true
      })

    }
    else {
      this.setState({
        isScroll: false
      })

    }
  }

  scrollUp = () => {
    window.scroll({
      top: 0, 
      behavior: 'smooth' 
    })

  }

componentDidMount(){
    window.addEventListener('scroll', this.handleScroll);
}

componentWillUnmount() {
    window.removeEventListener('scroll', this.handleScroll);
}

render() {
      return (
            {this.state.isScroll &&
                <div className="scroll-up" onClick={this.scrollUp}>top</div>
            }
        );
}

超级（道具）；
此.state={
伊斯克罗尔：错
}
}
handleScroll=（）=>{
设winHeight=window.innerHeight；
如果（window.pageYOffset>winHeight）{
这是我的国家({
伊斯克罗尔：是的
})
}
否则{
这是我的国家({
伊斯克罗尔：错
})
}
}
向上滚动=（）=>{
滚动窗口({
排名：0，
行为：“平滑”
})
}
componentDidMount（）{
window.addEventListener（'scroll'，this.handleScroll）；
}
组件将卸载（）{
window.removeEventListener（'scroll'，this.handleScroll）；
}
render（）{
返回(
{this.state.isScroll&&
顶部
}
);
}

构造器（道具）{
超级（道具）；
此.state={
伊斯克罗尔：错
}
}
handleScroll=（）=>{
设winHeight=window.innerHeight；
如果（window.pageYOffset>winHeight）{
这是我的国家({
伊斯克罗尔：是的
})
}
否则{
这是我的国家({
伊斯克罗尔：错
})
}
}
向上滚动=（）=>{
滚动窗口({
排名：0，
行为：“平滑”
})
}
componentDidMount（）{
window.addEventListener（'scroll'，this.handleScroll）；
}
组件将卸载（）{
window.removeEventListener（'scroll'，this.handleScroll）；
}
render（）{
返回(
{this.state.isScroll&&
顶部
}
);
}

我认为你所做的对于期望的效果来说是好的，但这是一个固执己见的回答：我真的很鄙视滚动上的fadein/out。在我看来，你永远不应该用另一个用户操作代替一个用户操作，而导致滚动上的fadein/out实际上是将用户的滚轮与导航锚列表交换到本质上完全不同的页面。如果你的用例需要它，那就去做吧，但我总是反对这种样式。老实说，我认为fadeIn效应没有任何问题（也许你误解了我）。但无论如何，我可以想象你可以在滚动事件中为几个元素（如粘性元素等）做其他事情，所以“问题”更为普遍。我认为你所做的对期望的效果来说是好的，但这是一个固执己见的回应：我真的很鄙视滚动上的fadein/out。在我看来，你永远不应该用另一个用户操作代替一个用户操作，而导致滚动上的fadein/out实际上是将用户的滚轮与导航锚列表交换到本质上完全不同的页面。如果你的用例需要它，那就去做吧，但我总是反对这种样式。老实说，我认为fadeIn效应没有任何问题（也许你误解了我）。但无论如何，我可以想象你可以在scroll事件中为几个元素（如粘性元素等）做其他事情，所以“问题”更一般。

    constructor(props){
    super(props);
    this.state = {
      isScroll: false
    }
}

handleScroll = () => {
    let winHeight = window.innerHeight;

    if (window.pageYOffset > winHeight){
      this.setState({
        isScroll: true
      })

    }
    else {
      this.setState({
        isScroll: false
      })

    }
  }

  scrollUp = () => {
    window.scroll({
      top: 0, 
      behavior: 'smooth' 
    })

  }

componentDidMount(){
    window.addEventListener('scroll', this.handleScroll);
}

componentWillUnmount() {
    window.removeEventListener('scroll', this.handleScroll);
}

render() {
      return (
            {this.state.isScroll &&
                <div className="scroll-up" onClick={this.scrollUp}>top</div>
            }
        );
}