时间戳

首页 > 解决方案 > 我如何在 react-bootstrap 中从组件头到组件 App 中的另一个组件做一个 href？

javascript - 我如何在 react-bootstrap 中从组件头到组件 App 中的另一个组件做一个 href？

问题描述

我想要做的是我页面中不同组件之间的链接，我有一个带有一堆链接的组件标题，我想引用同一页面上的另一个组件，换句话说，我试图做以下事情但是反应：

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

这就是我在使用 react-bootstrap 的标题组件中所拥有的，我已经找到了一些没有它的方法，但我需要用它来做

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 不起作用，应用程序组件是：

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

标签： javascriptreactjsreact-bootstrap

解决方案

那么，你想自动滚动到选定的 id 吗？我使用<NavLink />from reactstrap实现它。下面是它的工作原理

导航栏.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>
  );
}

推荐阅读