如何在反应打字稿的导航栏中创建动态元素

Posted 2023-02-23

【中文标题】如何在反应打字稿的导航栏中创建动态元素

【英文标题】：How to create a dynamic element inside a Navbar in react typescript

【发布时间】：2021-01-05 10:46:59

【问题描述】：

好的，所以我的问题是我的 app.js 中有一个位于 .

内的导航栏

App.js

 return (
    <div className="App">
      <Router>
        <Navbar color="light" light expand="md">
          <NavbarBrand href="/"></NavbarBrand>
          <NavbarToggler onClick=toggle />
          <Collapse isOpen=isOpen navbar>
            <Nav className="mr-auto" navbar>
              user && <NavItemComponent />
              <UncontrolledDropdown nav inNavbar>
                <DropdownToggle nav caret style= color: '#007bff' >
                  Inventory
                </DropdownToggle>
                <DropdownMenu>
                  <DropdownItem>
                    user && (
                      <NavItem>
                        <NavLink>
                          <Link to="/inventory-orders" exact activeStyle= color: 'purple' >
                            Inventory Orders
                          </Link>
                        </NavLink>
                      </NavItem>
                    )
                  </DropdownItem>
                  <DropdownItem>
                    user && (
                      <NavItem>
                        <NavLink>
                          <Link
                            to="/inventory-transactions"
                            exact
                            activeStyle= color: 'purple' 
                          >
                            Inventory Transactions
                          </Link>
                        </NavLink>
                      </NavItem>
                    )
                  </DropdownItem>
                  <DropdownItem>
                    user && (
                      <NavItem>
                        <NavLink>
                          <Link to="/inventory-leases" exact activeStyle= color: 'purple' >
                            Inventory Leases
                          </Link>
                        </NavLink>
                      </NavItem>
                    )
                  </DropdownItem>
                  <DropdownItem>
                    user && (
                      <NavItem>
                        <NavLink>
                          <Link to="/inventory-items" exact activeStyle= color: 'purple' >
                            Inventory Items
                          </Link>
                        </NavLink>
                      </NavItem>
                    )
                  </DropdownItem>
                  <DropdownItem>
                    user && (
                      <NavItem>
                        <NavLink>
                          <Link to="/add-inventory" exact activeStyle= color: 'purple' >
                            Add Inventory
                          </Link>
                        </NavLink>
                      </NavItem>
                    )
                  </DropdownItem>
                </DropdownMenu>
              </UncontrolledDropdown>

              user && (
                <NavItem>
                  <NavLink>
                    <Link to="/customer-billings" exact activeStyle= color: 'purple' >
                      Customer Billings
                    </Link>
                  </NavLink>
                </NavItem>
              )
              user && (
                <NavItem>
                  <NavLink>
                    <Link to="/payouts" exact activeStyle= color: 'purple' >
                      Payouts
                    </Link>
                  </NavLink>
                </NavItem>
              )
              user && (
                <NavItem>
                  <NavLink>
                    <Link to="/global-configuration" exact activeStyle= color: 'purple' >
                      Global Configuration
                    </Link>
                  </NavLink>
                </NavItem>
              )
              user && (
                <NavItem>
                  <NavLink>
                    <Link to="/boom-cards" exact activeStyle= color: 'purple' >
                      Boom Cards
                    </Link>
                  </NavLink>
                </NavItem>
              )

              user && (
                <NavItem>
                  <NavLink>
                    <Link to="/accounts" exact activeStyle= color: 'purple' >
                      Create an Account
                    </Link>
                  </NavLink>
                </NavItem>
              )

              <NavItem>
                user && (
                  <NavLink>
                    <Link to="/" exact activeStyle= color: 'purple'  onClick=_onUserSignedOut>
                      Log Out
                    </Link>
                  </NavLink>
                )
              </NavItem>
            </Nav>
          </Collapse>
        </Navbar>
        <Route
          path="/"
          render=() =>
            !user ? <LoginPage onUserSignedIn=_onUserSignedIn /> : <Redirect to="/transactions" />
          
        />
        <Route path="/accounts" component=Accounts />
        <Route path="/transactions" render=() => <Transactions user=user /> />
        <Route path="/payouts" render=() => <Payouts user=user /> />
        <Route path="/global-configuration" render=() => <GlobalConfig user=user /> />
        <Route path="/customer-billings" render=() => <CustomerBillings user=user /> />
        <Route path="/boom-cards" render=() => <BoomCards user=user /> />
        <Route
          path="/inventory-transactions"
          render=() => <InventoryTransactions user=user />
        />
        <Route path="/inventory-leases" render=() => <InventoryLeases user=user /> />
        <Route path="/inventory-items" render=() => <InventoryItems user=user /> />
        <Route path="/inventory-orders" render=() => <InventoryOrders user=user /> />
        <Route path="/add-inventory" render=() => <InventoryAdd user=user /> />
        <Route
          path="/create-inventory-transaction"
          render=() => <CreateInventoryTransaction user=user />
        />
      </Router>
    </div>
  );

在我有我想去的页面的链接。 如何创建一个允许我在内部传递值而不为每个 . 我已经创建了一个名为 NavItemComponent 的组件，它可以工作，但我不知道如何在一个组件中传递我需要的所有值 我希望我解释清楚。

Component.jsx

import React,  useState  from 'react';
import  BrowserRouter as Router, Route, Redirect, Link  from 'react-router-dom';
import 
  Collapse,
  Navbar,
  NavbarToggler,
  NavbarBrand,
  Nav,
  NavItem,
  NavLink,
  UncontrolledDropdown,
  DropdownToggle,
  DropdownMenu,
  DropdownItem,
  NavbarText,
 from 'reactstrap';

const NavItemComponent = props => 
  const [isOpen, setIsOpen] = useState(false);

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

  return (
    <div>
      <NavItem>
        <NavLink>
          <Link to="/transactions" exact activeStyle= color: 'purple' >
            Transactions
          </Link>
        </NavLink>
      </NavItem>
    </div>
  );
;

export default NavItemComponent;

【参考方案1】：

我不确定我是否得到你想要的，但如果我是对的，你希望有一种方法来指定所有 <NavItem>...</NavItem>，而无需为你添加的每个链接重新编写一个。

如果这是正确的，那么您可以创建一个链接数组，例如 const links = ['URL', 'URLLabel',] 然后做某事

links.map(link => <NavItem>...</NavItem>)

这样你就只写一次

【讨论】：

还有一个问题我不确定如何在此处实施解决方案：links.map(link => ...)