如何将道具传递给react-bootstrap的Nav.Link [英] how to pass props to Nav.Link of react-bootstrap

问题描述

我正在使用以下导航栏.我想将一些道具传递给Nav.Link.我不知道如何将属性传递给Nav.Link.还是就像HTML href ="a.html?param = test"一样?

I am using the following Navbar. I would like to pass some props to Nav.Link. I don't know how to pass the property to Nav.Link. Or is it just like 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>
    )
}

推荐答案

您正在将道具传递到您的Navigation组件，这很好；您可以在Nav.Link中使用道具，例如:

You're passing props to your Navigation component, which is alright; you can use the props in Nav.Link like:

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

在此处堆叠闪电

这篇关于如何将道具传递给react-bootstrap的Nav.Link的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！