Прокрутите до определенного компонента в Preact - PullRequest
Новая
       15

Прокрутите до определенного компонента в Preact

0 голосов
/ 13 июня 2019

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

это мой родительский компонент 

   <div class={style.root}>
    <Header />
    <Landing />
    <HowItWorks />
    <BrowserCatalogue />
    <ContactUs />
    <Footer />
  </div>

и в моем заголовке у меня есть 3 кнопки 

  <div class={styles.headerItems}>
      <span style={styles.pointer}>Working</span>
      <span style={styles.pointer}>Catalogue</span>
      <span style={styles.pointer}>Contact</span>
    </div>
  </div>

, например, когда я нажимаю на рабочую страницу, моя прокрутка должна перейти к HowItWorks component.any help?

1 Ответ

2 голосов
/ 13 июня 2019

Позволь мне помочь тебе, друг. Вы должны ввести refs в свой родительский компонент. Мы завернем каждый раздел в div и дадим ему ref реквизит.

Вот песочница для вашей справки: https://codesandbox.io/s/navbar-click-scroll-into-section-us8y7

Родительский компонент 

import React from "react";
import ReactDOM from "react-dom";
import Header from "./Header";
import HowItWorks from "./HowItWorks";
import BrowserCatalogue from "./BrowserCatalogue";

import "./styles.css";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selected: null
    };
  }
  //refs
  howItWorks = React.createRef();
  browserCatalogue = React.createRef();

  changeSelection = index => {
    this.setState({
      selected: index
    });
  };

  componentDidUpdate() {
      this.scrollToSection(this.state.selected);
  }

  scrollToSection = index => {
    let refs = [this.howItWorks, this.browserCatalogue];

    if (refs[index].current) {
      refs[index].current.scrollIntoView({
        behavior: "smooth",
        block: "nearest"
      });
    }
  };

  render() {
    return (
      <div className="App">
        <div>
          <Header changeSelection={this.changeSelection} />
        </div>
        <div ref={this.howItWorks}>
          <HowItWorks />
        </div>
        <div ref={this.browserCatalogue}>
          <BrowserCatalogue />
        </div>
      </div>
    );
  }
}

Заголовок 

const Header = (props) => {
    const { changeSelection } = props;
    return (
      <div style={{ background: "green" }}>
        <span onClick={() => changeSelection(0)}>Working</span>{" "}
        <span onClick={() => changeSelection(1)}>Catalogue</span>{" "}
        <span>Contact</span>
      </div>
    );
}

Workflow:

  • Каждый компонент получает ссылку, и мы сохраняем ее в памяти, когда нужно прокрутить.
  • Header, мы определили обработчик в parent с именем changeSelection() и мы передаем это как опору. Требуется индекс, и мы используем этот индекс для обновить родительское состояние.
  • Каждая ссылка, «Рабочая», «Каталог» и т. Д., Будет соответствовать index соответствует ref в нашем parent, поэтому установка обработчика onClick() для каждого span позволит нам передать этот индекс в changeSelection()
  • parent состояние обновлено, триггеры componentDidUpdate(), там мы запускаем scrollToSection(), который, как вы уже догадались, он принимает в индексе (хранящемся в нашем состоянии как «выбранный»). Создайте массив наших ссылок и просто используйте соответствующий индекс, чтобы найти эту ссылку и перейти к этому компоненту.
...