滚动到 Preact 中的特定组件

Question

我正在开发 preact 应用程序，我在单个页面中导入了不同的组件，我想单击 header 中的按钮并滚动到特定组件。

这是我的parent组件

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

在我的 header 中有 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 帮助？

Answer 1

让我帮助你的朋友。你应该在你的父组件中引入 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>
    );
}

工作流程：

每个组件都有一个 ref，我们将其保存在内存中以供我们使用时使用需要滚动。
Header，我们在 parent 中定义了一个名为 changeSelection() 的处理程序我们将其作为道具传递。它需要一个索引，我们使用该索引来更新父状态。
每个 link、"Working"、"Catalogue" 等将对应一个 index 与 parent 中的 ref 匹配，因此为每个 span 设置一个 onClick() 处理程序将允许我们将该索引传递给 changeSelection()
parent状态更新，触发componentDidUpdate()，在里面我们运行 scrollToSection() 你猜它包含一个索引（在我们的状态中存储为 "selected"）。创建我们的 refs 数组，然后简单地使用匹配的索引来定位该 ref 并滚动到该组件。

滚动到 Preact 中的特定组件

Scroll to particular component in Preact

preact

父组件

页眉