Reactjs 如何在react typescript中的导航栏中创建动态元素

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

App.js
返回(
{用户&&}
库存
{用户&&(
库存订单
)}
{用户&&(
存货交易
)}
{用户&&(
存货租赁
)}
{用户&&(
库存物品
)}
{用户&&(
添加库存
)}
{用户&&(
客户账单
)}
{用户&&(
支出
)}
{用户&&(
全局配置
)}
{用户&&(
吊杆卡
)}
{用户&&(
创建帐户
)}
{用户&&(
注销
)}
！用户？：
}
/>
} />
} />
} />
} />
} />
}
/>
} />
} />
} />
} />
}
/>
);
}

我有一个指向我想去的页面的链接。 如何创建一个组件，允许我在其中传递值，而无需为每个组件创建一个组件。 我已经创建了一个名为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;

Component.jsx
从“React”导入React，{useState}；
从“react Router dom”导入{BrowserRouter as Router，Route，Redirect，Link}；
进口{
崩溃
导航栏，
纳瓦巴托格勒，
纳瓦巴兰，
导航，
纳维坦，
导航链接，
不受控制的下降，
下拉开关，
下拉菜单，
下拉项，
NavbarText，
}来自“反应带”；
常量NavItemComponent=props=>{
常量[isOpen，setIsOpen]=useState（false）；
常量切换=（）=>setIsOpen（！isOpen）；
返回(
交易
);
};
导出默认NavItemComponent；

我不确定我是否得到了您想要的，但是如果我是对的，您希望有一种方法来指定所有的

…

，而不必为您添加的每个链接重新编写一个

如果这是正确的，那么您可以创建一个链接数组，如

const links=[{'URL'，'urlabel'}，{}]

然后像这样做

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

links.map（link=>…）

---

这样您只需写一次

我不确定如何在此处实现解决方案的另一个问题：：links.map（link=>…）