未找到反应滚动目标元素

Question

我有一个NavbarReact 组件，其中一个Link组件需要在单击时向下滚动到Section组件。我已经实现了react-scroll，但是，当我单击该Link组件时，我会target element not found进入浏览器控制台。

导航栏组件：

import React, { Component } from "react";
import { Link, animateScroll as scroll, scroller } from "react-scroll";

class Navbar extends Component {
  render() {
    return (
      <div>
        <ul>
          <li>
            <Link to="section1" activeClass="active" spy={true} smooth={true}>
              Section 1
            </Link>
          </li>
        </ul>
      </div>
    );
  }
}

export default Navbar;

以及 App.js 文件：

import React from "react";

// Styling
import "./styles/App.css";

// Components
import Navbar from "./components/Navbar";
import SectionOne from "./components/SectionOne";

function App() {
  return (
    <div className="App">
      <div>
        <Navbar />
        <SectionOne id="section1"/>
      </div>
    </div>
  );
}

export default App;

我使用这个存储库作为参考，但是，事情不起作用。我在这里错过了什么？

Answer 1

我在SectionOne组件内部实现了一个div

<div id="section-one-wrapper">Section One content...</div>

然后在Link组件中指定该 id：

<Link to="section-one-wrapper" activeClass="active" spy={true} smooth={true}>
    Section 1
</Link>

它起作用了。