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

Question

好的，所以我的问题是我的 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;

Answer 1

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

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

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

这样你就只写一次