当我与 React 全屏组件一起使用时，屏幕上的 React 不起作用

Question

当我在整页 react 的幻灯片中向下滚动时，虽然屏幕视口上的页面div

的背景颜色没有改变，但我使用屏幕上的反应 npm 包与整页反应组件，但是当我使用没有整页反应组件的屏幕反应时，它工作得很好，我认为当我在整页反应幻灯片中向下滚动时，视口不认为新幻灯片是新页面，所以div背景颜色不会改变。另外，当最后一页中的div在屏幕上时，我尝试调整窗口大小，然后更改背景。你能帮我解决这个问题吗？

render() {
    const { height } = this.state;
    return (
      <Layout>
        <ReactFullpage
          refresh
          keyboardScrolling
          lazyLoading
          scrollOverflowReset={false}
          slidesNavigation={deger}
          onLeave={this.onLeave}
          render={({ state, fullpageApi }) => {
            return (
              <ReactFullpage.Wrapper>
                <React.Fragment>
                  <div className="section">
                    <p>Section 1</p>
                  </div>
                  <div className="section">
                    <div className="Index_LogoWrapper" style={{ height }}>
                      <LogoImage />
                      <div className="Index_ContactUsWrapper">
                        <div className="Index_ContactUs">
                For more information contact us at&nbsp;
                          <a href="mailto:[e-mail]">[e-mail]</a>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div className="section">
                    <TrackVisibility>
                      <ComponentToTrack />
                    </TrackVisibility>
                  </div>
                </React.Fragment>
              </ReactFullpage.Wrapper>
            );
          }}
        />
      </Layout>
    );
  }

Answer 1

如果您用于更改颜色的组件依赖于滚动位置，那么您必须在 react-fullpage 组件中使用 fullPage.js 的选项 scrollBar。

否则，我鼓励您使用整页.js回调，例如afterLoad或onLeave，甚至使用添加到 body 元素的整页.js状态类。

请参阅我的一个视频教程，了解如何使用整页.js状态类执行 CSS 3 动画：https://www.youtube.com/watch?v=qiCVPpI9l3M