如何从位于“应用程序”组件内的组件滚动到另一个组件

Question

所以我是个反应型菜鸟，我的问题是我想知道如何滚动到链接中与另一个组件嵌套的组件。

这是我正在谈论的结构

我的组件位于名为app的组件中，我想通过单击Navigation组件中的导航链接之一来滚动到这些组件中的任何一个。

import React from 'react';
import logo from './logo.svg';
import './App.css';
import Welcome from './components/Welcome/Welcome';
import Skills from './components/Skills/Skills';
import About from './components/About/About';
import Contact from './components/Contact/Contact';
import Navigation from './components/Navigation/Navigation';

class App extends React.Component {
  render() {
    return (
      <div>
        <Navigation />
        <Welcome />
        <Skills />
        <About />
        <Contact />
      </div>
    );
  }
}

export default App;

这是我的导航组件jsx

import React from 'react';
import {Navbar, Nav } from 'react-bootstrap';
import './Navigation.css' ;

 class Navigation extends React.Component {
  render(){
    return (
      <Navbar bg="dark" variant="dark" className="nav" sticky="top" expand="md">
        <Navbar.Toggle aria-controls="basic-navbar-nav" />
        <Navbar.Collapse id="responsive-navbar-nav">
        <Nav className="mr-auto">
          <Nav.Link
          href="#home"
          className="nav-item 1">Home</Nav.Link>
          <Nav.Link
          href="#aboutme"
          className="nav-item 2">About Me</Nav.Link>
          <Nav.Link
          href="#Myskills"
          className="nav-item 3">My Skills</Nav.Link>
          <Nav.Link
          href="#Contactme"
          className="nav-item 3">Contact Me</Nav.Link>
        </Nav>
        </Navbar.Collapse>
    </Navbar>

  );
  }
}

export default Navigation;

Answer 1

您可能正在寻找react-router功能。 ideia与在express中定义路线非常相似，但用于在匹配路线时渲染组件。