如何在SPFx中修改页面导航链接？求更优的非DOM操作方案

嗨，我完全理解你不想用jQuery直接操作DOM的顾虑——确实，碰React管控的DOM元素很容易踩坑，比如页面刷新或者组件重新渲染时，你的修改大概率会被覆盖，而且这种方式也不符合SPFx的开发规范。针对修改左侧Quick Launch导航的需求，有几个更靠谱的方案，我给你拆解下：

方案1：用官方API修改导航的持久化配置 #

如果你的需求是永久修改导航节点（比如添加、删除、修改链接），那直接调用SharePoint REST API是最规范的做法，完全不用碰DOM。

举个简单的例子，在SPFx应用自定义器（Application Customizer）里，你可以通过SPHttpClient来操作Quick Launch：

import { SPHttpClient } from '@microsoft/sp-http';

// 获取当前网站的Quick Launch节点
private async getQuickLaunchNodes(): Promise<any[]> {
  const response = await this.context.spHttpClient.get(
    `${this.context.pageContext.web.absoluteUrl}/_api/web/navigation/quicklaunch`,
    SPHttpClient.configurations.v1
  );
  const data = await response.json();
  return data.value;
}

// 修改某个导航节点的标题
private async updateNavNode(nodeId: number, newTitle: string): Promise<void> {
  const updateUrl = `${this.context.pageContext.web.absoluteUrl}/_api/web/navigation/quicklaunch/getbyid(${nodeId})`;
  await this.context.spHttpClient.post(
    updateUrl,
    SPHttpClient.configurations.v1,
    {
      headers: {
        'Accept': 'application/json;odata=nometadata',
        'Content-Type': 'application/json;odata=nometadata',
        'IF-MATCH': '*',
        'X-HTTP-Method': 'MERGE'
      },
      body: JSON.stringify({ Title: newTitle })
    }
  );
}

在onInit方法里，你就可以调用这些函数，比如获取所有节点后筛选出要修改的项，再执行更新。这种方式修改的是导航的实际配置，不会因为页面刷新失效，完全符合官方规范。

方案2：用React组件替换前端导航显示 #

如果只是临时修改导航的前端展示（比如隐藏某些链接、添加临时自定义内容），可以用React来渲染自定义导航，替换掉原有的Quick Launch容器，而不是用jQuery瞎改DOM。

步骤大概是这样：

1. 先创建一个React组件，接收原始导航节点数据，处理后渲染成你想要的样式。
2. 在SPFx扩展里找到Quick Launch的DOM容器，清空原有内容后挂载你的React组件。

比如自定义导航组件：

import * as React from 'react';

interface ICustomNavProps {
  originalNodes: any[];
}

export const CustomNav: React.FC<ICustomNavProps> = ({ originalNodes }) => {
  // 这里可以自由修改导航节点：过滤、新增、排序都行
  const modifiedNodes = originalNodes
    .filter(node => node.Title !== '要隐藏的链接')
    .concat([{
      Title: '我的自定义链接',
      Url: `${window.location.origin}/sites/yourSite/SitePages/MyPage.aspx`
    }]);

  return (
    <div className="ms-QuickLaunch">
      {modifiedNodes.map(node => (
        <a key={node.Id} href={node.Url} className="ms-QuickLaunch-link">
          {node.Title}
        </a>
      ))}
    </div>
  );
};

然后在应用自定义器的onInit里挂载组件：

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { CustomNav } from './CustomNav';

public async onInit(): Promise<void> {
  const navNodes = await this.getQuickLaunchNodes();
  // 找到Quick Launch的容器（类名可能随SharePoint版本变化，建议用浏览器检查确认）
  const navContainer = document.querySelector('#sideNavBox .ms-QuickLaunch');
  
  if (navContainer) {
    navContainer.innerHTML = '';
    ReactDOM.render(<CustomNav originalNodes={navNodes} />, navContainer);
  }
}

这种方式用React来管理导航的渲染，避免了直接操作DOM的风险，而且和SPFx的技术栈一致，维护起来也更方便。

注意事项 #

• 如果你用方案2，要注意SharePoint的DOM结构可能会更新，所以选择器最好用更稳定的（比如#sideNavBox是比较固定的容器ID）。
• 操作导航API需要对应的权限，比如网站编辑权限，要确保你的扩展有足够的权限。
• 如果是临时展示修改，方案2足够；如果要永久修改导航配置，方案1是首选。

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