如何在React+TypeScript开发的Office JS加载项加载时显示类似Script Labs的启动屏

实现逻辑非常简单，核心是在Office初始化完成前显示启动屏内容，初始化完成后切换为实际业务界面，两种实现方式可选：

方式一：静态HTML实现（推荐，启动速度更快） #

直接在入口HTML文件（默认是taskpane.html）的渲染容器节点内写入启动屏静态代码，页面加载后无需等待JS执行就能第一时间显示，和Script Labs的加载体验完全一致：

<body>
  <!-- 其他内容省略 -->
  <div id="container">
    <!-- 启动屏内容，可自行调整样式匹配你的需求 -->
    <div style="display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; gap: 16px; padding: 24px;">
      <img src="替换为你的logo资源地址" alt="产品Logo" style="width: 80px; height: 80px;">
      <p style="font-size: 18px; font-weight: 500; margin: 0;">Code ● Run ● Share</p>
    </div>
  </div>
  <!-- 其他脚本引用省略 -->
</body>

你现有的逻辑不需要做任何修改：当Office初始化完成调用ReactDOM.render时，会自动覆盖容器内的静态启动屏内容，无缝切换到实际应用界面。

方式二：React组件内控制 #

如果你希望用React统一管控所有渲染逻辑，可以直接复用现有代码里透传的isOfficeInitialized参数做判断：

第一步：修改App.tsx #

import * as React from 'react';

interface AppProps {
  title: string;
  isOfficeInitialized: boolean;
}

const App: React.FC<AppProps> = ({ title, isOfficeInitialized }) => {
  // Office未初始化完成时渲染启动屏
  if (!isOfficeInitialized) {
    return (
      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', minHeight: '100vh', gap: '16px', padding: '24px' }}>
        <img src="替换为你的logo资源地址" alt="产品Logo" style={{ width: 80, height: 80 }} />
        <p style={{ fontSize: 18, fontWeight: 500, margin: 0 }}>Code ● Run ● Share</p>
      </div>
    )
  }

  // 初始化完成后渲染实际业务内容
  return (
    <div>
      <h1>{title}</h1>
      {/* 此处放入你的实际业务代码 */}
    </div>
  )
}

export default App;

第二步：调整渲染触发逻辑 #

在你现有的索引TSX文件中，增加首次渲染触发，让页面加载后立刻显示启动屏：

// 原有代码省略
const render = (Component) => {
  ReactDOM.render(
    <AppContainer>
      <Component title={title} isOfficeInitialized={isOfficeInitialized} />
    </AppContainer>,
    document.getElementById("container")
  );
};

// 新增这一行：页面加载后立刻渲染启动屏
render(App);

/* Render application after Office initializes */
Office.initialize = () => {
  isOfficeInitialized = true;
  render(App);
};
// 原有代码省略

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