reactjs - 未找到 react 滚动目标元素

Question

我有一个 Navbar React 组件，其中有一个 Link 组件，点击时需要向下滚动到 Section 组件。我已经实现了 react-scroll，但是，当我点击 Link 组件时，我在浏览器控制台中看到 找不到目标元素。

导航栏组件:

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;

我用了this repo但是，作为引用，事情不起作用。我在这里错过了什么？

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>

它奏效了。