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

Question

我正在尝试编写一个仪表板侧边栏，其中包含几个“主要”按钮，这些按钮（通过 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>
));

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

我是初学者。

Answer 1

传递给地图回调函数的对象menuItem 具有包含的属性secondaries。你可以在这个属性上使用 map，因为 secondaries 是一个数组，只需将 map 放在你的 JSX 中。

<div
    className="card-body collapse ml-5"
    id={`${socialItem.primaryText}Submenu`}
  >
    <ul className="list-unstyled">
      {menuItem.secondaries.map((subItem) => {
        ...
      })

    </ul>
</div>

附：你忘了关闭你的最后一个 div 标签，你有第二个 </li> 而不是 </ul>

Answer 2

这会起作用（让它更实用一些，给你一个例子来说明功能性 React 组件的可能性）

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

export default function App(props) {
  function renderSecondaryMenu(items) {
    return items.map(secondaryItem => {
      return (
        <li>
          <Link className="small" to={secondaryItem.secondaryURL}>
            <span className="mr-3">
              <i className="fa fa-chevron-right" />
            </span>
            {secondaryItem.secondaryText}
          </Link>
        </li>
      );
    });
  }

  function renderMenuArray() {
    return menuArray.map(menuItem => {
      return (
        <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} />
              </span>
              {menuItem.primaryText}
            </Link>
          </button>

          <div
            className="card-body collapse ml-5"
            id={`${menuItem.primaryText}Submenu`}
          >
            <ul className="list-unstyled">
              {renderSecondaryMenu(menuItem.secondaries)}
            </ul>
          </div>
        </li>
      );
    });
  }

  return <div className="App">{renderMenuArray()}</div>;
}

Answer 3

我认为将侧边栏定义为一个对象并不会带来很多好处，除非您使用具有不同按钮集的同一个侧边栏组件并且您希望能够在它们之间切换。 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>
)

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