我如何在 react-bootstrap 中從組件 header 到組件 App 中的另一個組件做一個 href？

Question

我想要做的是我頁面中不同組件之間的鏈接，我有一個帶有一堆鏈接的組件 header，我想引用同一頁面上的另一個組件，換句話說，我試圖做以下事情但是反應：

<a href="#move">Hi!</a>
<div id="#move">You have been moved</div> 

這就是我在使用 react-bootstrap 的 header 組件中所擁有的，我找到了一些沒有它的方法，但我需要用它來做

export default function Header() {

    return (
        <>
            <Navbar variant="dark" expand="lg" style={{ "background-color": "#1A2A4E" }} sticky="top" >
                <Navbar.Brand href="#home">Logo</Navbar.Brand>
                <Navbar.Toggle aria-controls="basic-navbar-nav" />
                <Navbar.Collapse id="basic-navbar-nav">
                    <Nav className="mr-auto" />
                    <Nav>
                        <LinkContainer to={{
                            hash:"Footer"
                        }}>
                            <Nav.Link href="#">Actividades</Nav.Link>
                        </LinkContainer>
                        <Nav.Link href="#">Fechas</Nav.Link>
                        <Nav.Link href="#">Cursos</Nav.Link>
                        <Nav.Link href="#">Instalaciones</Nav.Link>
                        <Nav.Link href="#">Contacto</Nav.Link>

                        
                    </Nav>
                </Navbar.Collapse>
            </Navbar>
        </>
    )
}

然后在應用程序中，第一個鏈接獲取<a href="/#Footer" data-rb-event-key="/#Footer" class="active nav-link active">Actividades</a>但 href不起作用的 App 組件是：

function App() {
  return (
    <div className="App">
      <div className="imagen-fondo" />
      <div className="fondo-blaquesino" />
      <div className="">
        <Header Footer={<Footer/>} />
        <Infoinicio />
      </div>


      <div className="">
        <Actividades />
        <Cursos />
        <InscrCalendario />
        <Instalaciones />
        <Contacto />
        <div id="#Footer" />
        <Footer />
      </div>

    </div>
  );
}

Answer 1

所以，你想自動滾動到選定的 id 嗎？ 我使用 reactstrap 中的<NavLink />實現它。 下面是它的工作原理

導航欄.tsx

import React, { useState } from 'react';
import { withRouter } from 'react-router-dom';
import {
  Navbar, NavbarToggler, Collapse,
  Nav, NavItem, NavLink,
} from 'reactstrap';
import { HistoryProps } from '../../interfaces';
import './TopBar.scss';

function NavigationBar(props: HistoryProps) {
  const [isOpen, setIsOpen] = useState(false);

  const toggleNav = () => setIsOpen(!isOpen);

  const path = props.history.location.hash;

  return (
    <Navbar expand="md" className="navbar-wrapper">
      <NavbarToggler
        onClick={toggleNav}
        data-testid="navbar-toggler"
        className="navbar navbar-light outline-none"
      />
      <Collapse isOpen={isOpen} navbar data-testid="navbar-collapse" className="h-100">
        <Nav className="ml-auto h-100" navbar>
          <NavItem className="navbar-navitem pl-2 pr-2" active={!path || path.includes('#about-me')}>
            <NavLink className="font-size-12" href="#about-me">
              About Me
            </NavLink>
          </NavItem>
        </Nav>
      </Collapse>
    </Navbar>
  );
}

export default withRouter(NavigationBar);

並在我的情況下在另一個組件中定義了目標組件/元素。

登陸頁面.tsx

import React from 'react';
import { Row } from 'reactstrap';
import './LandingPage.scss';

export default function LandingPage() {
  return (
    <div className="container-fluid">
      <Row className="about-me-wrapper id-wrapper" id="about-me">
        {/* Element here */}
      </Row>
    </div>
  );
}