как передать реквизит в Нав.Ссылка реакции- bootstrap - PullRequest
Новая
       107

как передать реквизит в Нав.Ссылка реакции- bootstrap

0 голосов
/ 01 марта 2020

Я использую следующий Navbar. Я хотел бы передать некоторые реквизиты в Nav.Link. Я не знаю, как передать свойство в Nav.Link. Или это просто HTML href = "a. html? Param = test"? 

    const Navigation = (props) => {
    console.log(props);
    return (
        <Navbar bg="primary" variant="dark">
            <Navbar.Brand href="/">Dating Service</Navbar.Brand>
            <Navbar.Toggle aria-controls="basic-navbar-nav" />
            <Navbar.Collapse id="basic-navbar-nav">
                <Nav className="ml-auto">
                    <Nav.Link href="/">Home</Nav.Link>
                    <Nav.Link href="/CreateProfile">Create Profile</Nav.Link>
                    <Nav.Link href="/ViewProfile">View Profile</Nav.Link>
                </Nav>
            </Navbar.Collapse>
        </Navbar>
    )
}

1 Ответ

0 голосов
/ 01 марта 2020

Вы передаете реквизит своему компоненту Navigation, что в порядке; Вы можете использовать реквизиты в Nav.Link, например: 

<Nav.Link href={links[0].url}>{links[0].label}</Nav.Link>

образец js: 

import React, { useState } from "react";
import { Navbar, Nav } from "react-bootstrap";

const Navigation = ({ name, links }) => {
  return (
    <>
      <div>
        <Navbar bg="primary" variant="dark">
          <Navbar.Brand href="/">Dating Service</Navbar.Brand>
          <Navbar.Toggle aria-controls="basic-navbar-nav" />
          <Navbar.Collapse id="basic-navbar-nav">
            <Nav className="ml-auto">
              {links.map((val, indx) => {
                return (
                  <Nav.Link key={indx} href={val.url}>
                    {val.label}
                  </Nav.Link>
                );
              })}
            </Nav>
          </Navbar.Collapse>
        </Navbar>
      </div>
      <h1>Hello {name}!</h1>
    </>
  );
};
export default Navigation;

рабочий стек * здесь

...