Управление DOM в React при прокрутке в определенных дочерних компонентах, таких как страница обновления Firefox - PullRequest
Новая
       24

Управление DOM в React при прокрутке в определенных дочерних компонентах, таких как страница обновления Firefox

0 голосов
/ 05 апреля 2019

Я пытаюсь разработать веб-страницу в React, которая определяет, в каком div в данный момент находится свиток, и меняет стиль в некоторых элементах этого div.

В панели навигациикомпонент, который я уже назвал window.AddEventListener(..) один раз

Ссылка на эту реализацию с использованием слушателя прокрутки и React

https://stackoverflow.com/a/47442272/3332734

Так что невозможновызовите его дважды на этой же странице, поэтому я вызываю document.querySelector('.page-article-section'), определенный для 3 section тегов HTML5.

Я использую страницу обновления Firefox в качестве базы для этого.

https://www.mozilla.org/en-US/firefox/mobile/

Снимок экрана с тем, что мы уже сделали:

enter image description here

По сути, этоСтруктура HTML выглядит следующим образом: 

const PrivacySection = ({ ...props }) => {
  console.log('-- privacy-section props: ', props);

  return (
    <section className="page-article-section feature-content" id="firefox-privacy">
      <h3>Privacy</h3>
      ...
    </section>
  );
}


export default (
  <article className="page-article" id="firefox">
    <div className="features-scroller-section page-section" id="firefox-features">
      <div className="features-scroller-container">
        <header className="features-scroller-header">
          <div className="features-scroller-header-container">
            <h2 className="section-title">Firefox mobile</h2>
            <a href="#mobile-download-buttons-firefox">Download now</a>

            <nav className="features-scroller-nav">
              <ul>
                <li><a className="current" href="#firefox-sync">Sync</a></li>
                <li><a href="#firefox-privacy">Privacy</a></li>
                <li><a href="#firefox-extensions">Extensions</a></li>
              </ul>
              <button className="previous" type="button">Previous</button>
              <button className="next" type="button">Next</button>
            </nav>
          </div>
        </header>

        <div className="features-scroller-content">
          <section className="page-article-section feature-content" id="firefox-sync">
            <h3>Sync</h3>
            ......
          </section>

          <ScrollControlls component={PrivacySection} />

          <section className="page-article-section feature-content" id="firefox-extensions">
            <h3>Extensions</h3>
            ...
          </section>
        </div>

      </div>
    </div>
  </article>
);

Компонент My ScrollControlls находится ниже: 

import React, { Component } from "react";


export class ScrollControls extends Component {
  constructor(props) {
    super(props);

    this.myRef = React.createRef();
  }
  componentDidMount() {
    document.querySelector('.page-article-section').addEventListener('scroll', this.handleScroll);
  }
  componentWillUnmount() {
    document.querySelector('.page-article-section').removeEventListener('scroll', this.handleScroll);
  }
  handleScroll = e => {
    console.log('-- calling handle-scroll event: ', e);
  }
  render = () => {
    const { component: Component } = this.props;

    return <Component onScroll={this.handleScroll} />
  }
}

export default ScrollControls;

Проблема в том, что этот второй вызов прослушивателя прокрутки не работает.Поэтому, пожалуйста, мне нужна помощь, чтобы сделать это соответствующим образом.

...