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>
    );
}

工作流程：

每个组件都有一个引用，我们将其保存在内存中需要滚动。
Header，我们在parent中定义了一个名为changeSelection()的处理程序我们将其作为道具传递。它需要一个索引，我们使用该索引来更新父状态。
每个链接“工作中”，“目录”等都将对应一个index 与ref中的parent匹配，因此为每个onClick()设置一个span处理程序将使我们可以将该索引传递到changeSelection()
parent状态已更新，其中触发了componentDidUpdate() 我们运行scrollToSection()，您猜到它接受了一个索引（在我们的状态下存储为“ selected”）。创建一个由我们的引用组成的数组，然后简单地使用匹配索引来定位该引用并滚动到该组件。

滚动到Preact中的特定组件

1 个答案:

父组件

标题