滚动到 Preact 中的特定组件

Question

我正在开发 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 组件。有什么帮助吗？

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() 的处理程序 我们将它作为道具传递。它需要一个索引，我们使用该索引来 更新父状态。
• 每个链接、“工作”、“目录”等都将对应一个index 与parent 中的ref 匹配，因此为每个span 设置onClick() 处理程序将允许我们将该索引传递给changeSelection()
• parent 状态更新，触发componentDidUpdate()，在那里 我们运行scrollToSection()，你猜它在一个索引中（存储在我们的状态为“选定”）。创建一个我们的 ref 数组，然后简单地使用匹配的索引来定位该 ref 并滚动到该组件。