如何重新排列导航菜单数组元素位置并实现新增元素自动后置

1. 数组排序处理 #

先明确你要的固定显示顺序：Quicky Starts、Guilds、Reference Docs、Help，给你两种处理方式，按需选择：

方式一：按固定标题排序（灵活适配原数组）

适合原数组元素顺序不固定，或者后续可能调整固定顺序的情况，代码如下：

// 定义目标显示顺序
const targetOrder = ['Quicky Starts', 'Guilds', 'Reference Docs', 'Help'];

// 处理原数组，生成符合顺序的新数组，新增元素自动排最后
const newNavArr = [
  ...originalNavArr.sort((a, b) => {
    const posA = targetOrder.indexOf(a.title);
    const posB = targetOrder.indexOf(b.title);
    // 不在固定列表里的元素直接排到后面
    if (posA === -1) return 1;
    if (posB === -1) return -1;
    return posA - posB;
  })
];

方式二：手动提取重组（适合元素数量少、位置固定的情况）

如果原数组的元素位置是确定的（比如原第2个元素是Quicky Starts，原第3个是Reference Docs），直接手动重组数组：

// 假设原数组是 originalNavArr，索引从0开始计数
const newNavArr = [
  originalNavArr[1], // 原第2个元素移到索引0
  originalNavArr[0], // 原第1个元素放索引1
  originalNavArr[3], // 原第4个元素移到索引2（如果原第3个是你要的，就改成originalNavArr[2]）
  originalNavArr[2], // 原第3个元素放索引3
  ...originalNavArr.slice(4) // 原数组里剩下的元素自动追加到末尾
];

2. 导航代码调整 #

把处理好的newNavArr直接用在渲染里就行，另外注意原代码里的position和padding属性写法不对，得放到style对象里，或者用CSS类；还有别用index当key，用每个元素唯一的slug更稳定：

<Nav className="me-auto">
  {newNavArr.map((button) => (
    <NavLink
      key={button.slug}
      to={button.slug}
      style={{ position: "relative", padding: "20px" }}
    >
      {button.title}
    </NavLink>
  ))}
</Nav>

3. 新增元素自动排末尾 #

之后要加新元素的话，直接用push或者展开运算符追加到newNavArr末尾就行，比如：

// 新增导航项
newNavArr.push({ title: '新导航项', slug: '/new-item' });

用方式一的排序逻辑时，新增元素会自动排到固定顺序元素的后面，完全符合需求。

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