时间戳

首页 > 解决方案 > 在 React JSX 中的映射数组内映射嵌套数组

javascript - 在 React JSX 中的映射数组内映射嵌套数组

问题描述

我正在尝试编写一个仪表板侧边栏，它有几个“主要”按钮（通过 Bootstrap）折叠一些“次要”按钮。我希望能够轻松地更新和设置整个事物的样式，因此编写静态标记是不可能的。这是数组中的一个对象：

const menuArray = [
{
  primaryText: "Applications",
  primaryIcon: "fa fa-rocket",
  primaryURL: "/applications",
  secondaries: [
    {
      secondaryText: "Softwares",
      secondaryURL: "/softwares",
    },
    {
      secondaryText: "Videogames",
      secondaryURL: "/videogames",
    },
    {
      secondaryText: "Tools",
      secondaryURL: "/tools",
    },
  ],
},
]

这是渲染数组的函数，我只是通过 {renderMenuArray} 在 JSX 标记中调用它

const renderMenuArray = menuArray.map((menuItem) => (
<li className="py-2">
  <button
    data-target={`#${menuItem.primaryText}Submenu`}
    data-toggle="collapse"
    aria-expanded="false"
    className="btn btn-dark btn-menu btn-block pl-0 mb-1"
  >
    <Link to={menuItem.primaryURL}>
      <span className="mr-3">
        <i className={menuItem.primaryIcon}></i>
      </span>
      {menuItem.primaryText}
    </Link>
  </button>

  <div
    className="card-body collapse ml-5"
    id={`${socialItem.primaryText}Submenu`}
  >
    <ul className="list-unstyled">
      <li>
        <Link className="small" to="/applications/softwares">
          <span className="mr-3">
            <i className="fa fa-chevron-right"></i>
          </span>
          Softwares
        </Link>
      </li>
    </ul>
  </div>
));

我可以毫无问题地渲染“主要”对象，但我希望每个“主要”对象（父数组的每次迭代）都遍历“次要”数组的计数（对于每个“主要”对象）。

我是初学者开发人员。

标签： javascriptarraysreactjsjsx

解决方案

我认为将侧边栏定义为对象并不会带来很多好处，除非您使用具有不同按钮集的相同侧边栏组件并且您希望能够在它们之间切换。JSX 已经是一种标记语言，所以它是声明性的。您可以简单地将侧边栏定义为

const Sidebar = () => (
  <PrimaryItem text="Applications" icon="fa fa-rocket" url="/applications">
    <SecondaryItem text="Softwares" url="/softwares" />
    <SecondaryItem text="Videogames" url="/videogames" />
    <SecondaryItem text="Tools" url="/tools" />
  </PrimaryItem>
)

然后根据需要实现每个组件以显示它们。我认为这更清洁，更容易维护和修改。

推荐阅读