开发Word插件时XML中能否引用React组件替代HTML文件

1. 调整manifest.xml配置 #

你不需要为每个按钮单独创建HTML文件，所有功能按钮的任务窗格都指向同一个React应用入口地址，通过URL查询参数区分要渲染的组件。
首先修改按钮对应的SourceLocation配置，示例：

<!-- 定义所有按钮共用的React入口URL，通过参数区分组件 -->
<bt:Url id="Definitions.Url" DefaultValue="https://localhost:3000/index.html?component=definitions"/>
<bt:Url id="SpellCheck.Url" DefaultValue="https://localhost:3000/index.html?component=spellCheck"/>
<bt:Url id="GrammarCheck.Url" DefaultValue="https://localhost:3000/index.html?component=grammarCheck"/>

每个按钮的Action部分的SourceLocation对应上面的ID即可，不需要修改其他Control配置。 #

2. 改造React入口逻辑 #

修改index.tsx，在Office初始化完成后，先读取URL中的查询参数，匹配要渲染的目标组件：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';
import Definitions from './components/Definitions';
import SpellCheck from './components/SpellCheck';
import GrammarCheck from './components/GrammarCheck';
// 导入其他你封装好的业务组件

initializeIcons();

let isOfficeInitialized = false;
const title = "Contoso Task Pane Add-in";

// 建立参数和组件的映射关系
const componentMap = {
  default: App,
  definitions: Definitions,
  spellCheck: SpellCheck,
  grammarCheck: GrammarCheck
}

const render = () => {
  // 读取URL查询参数中的component值
  const searchParams = new URLSearchParams(window.location.search);
  const targetComponentKey = searchParams.get('component') || 'default';
  const TargetComponent = componentMap[targetComponentKey] || componentMap.default;

  ReactDOM.render(
    <AppContainer>
      <ThemeProvider>
        <TargetComponent title={title} isOfficeInitialized={isOfficeInitialized} />
      </ThemeProvider>
    </AppContainer>,
    document.getElementById("container")
  );
};

/* Office初始化完成后渲染应用 */
Office.initialize = () => {
  isOfficeInitialized = true;
  render();
};

if ((module as any).hot) {
  (module as any).hot.accept("./components/App", () => {
    render();
  });
}

可选优化：使用路由实现无刷新切换 #

如果希望点击不同按钮时，任务窗格不需要重新加载整个页面就能切换组件，可以给所有按钮设置相同的TaskpaneId，同时集成React Router做哈希路由匹配，流程和上面的参数匹配逻辑一致，只是把查询参数换成路由路径即可。 #

原理解释 #

Office任务窗格本质是一个内嵌的Chromium容器，渲染的内容完全由你指定的URL决定。React应用打包后所有组件都编译在同一个bundle中，只要入口HTML加载成功，就能根据标识渲染任意指定的组件，不需要为每个组件单独创建HTML文件。

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