React中如何访问数组对象内subTitle下的title值并替换渲染

你配置里的subTitle是对象数组，无法直接替换一级的{obj.title}，根据实际需求有两种实现方式：

方式1：在当前一级导航下渲染所有子标题为子菜单项（多级导航最常用方案） #

const navArr = [
  {
    path: "/introduction",
    title: "회사소개",
    subTitle: [{ title: "summary" }, { title: "vision" }],
  },
]

{navArr.map((obj) => {
  return (
    <NavItem>
      <MenuItem onClick={handleHoverToggle} className={classes.navItem}>
        {obj.title}
      </MenuItem>
      {/* 遍历subTitle渲染所有子标题 */}
      {obj.subTitle.map((subItem, index) => (
        <MenuItem key={index} className={classes.subNavItem}>
          {subItem.title}
        </MenuItem>
      ))}
    </NavItem>
  );
})}

如果需要子标题支持跳转，可以在subTitle的每个对象中新增path字段配置即可。

方式2：直接用subTitle的某一项替换一级导航标题 #

如果不需要展示一级的회사소개，要直接显示subTitle里的指定项，通过数组下标取值即可：

{navArr.map((obj) => {
  return (
    <NavItem>
      <MenuItem onClick={handleHoverToggle} className={classes.navItem}>
        {/* 下标从0开始，0对应summary，1对应vision */}
        {obj.subTitle[0].title}
      </MenuItem>
    </NavItem>
  );
})}

注意：如果存在部分导航没有subTitle字段的情况，要加可选链兼容避免报错，写法改为obj.subTitle?.[0]?.title即可。

内容的提问来源于stack exchange，提问作者jaeseong