Office js加载时如何显示启动画面？

Question

我正在使用带有 React 和 TypeScript 的 Office js 插件。我想在加载项渲染时显示启动画面。此外，我还安装了脚本实验室加载项，它显示带有徽标和文本的正确启动画面，如“代码 ● 运行 ● 共享”。我想要完全相似，但我在谷歌上找不到任何相似的东西。如果您能提供任何帮助，我将不胜感激。 我添加了一张图片所以更清楚我的要求

这是我的代码片段。

import "office-ui-fabric-react/dist/css/fabric.min.css";
import App from "./components/App";
import { AppContainer } from "react-hot-loader";
import { initializeIcons } from "office-ui-fabric-react/lib/Icons";
import { initializeFileTypeIcons } from "@fluentui/react-file-type-icons";
import * as React from "react";
import * as ReactDOM from "react-dom";
/* global document, Office, module, require */

initializeIcons();
initializeFileTypeIcons();

let isOfficeInitialized = false;

const title = "Task Pane Add-in Example";

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

/* Render application after Office initializes */
Office.initialize = () => {
  isOfficeInitialized = true;
  render(App);
};

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

Answer 1

这可以通过从 Office.initialize 函数中删除 App 组件的呈现来实现。我们想要一个加载页面 while Office 初始化。为此，我们可以呈现应用程序并移动我们的逻辑，以确定 Office 是否已加载到应用程序组件中。

首先，让我们更新 Component 组件以不传递标题或 isOfficeInitialized 道具：

//let isOfficeInitialized = false;

//const title = "Task Pane Add-in Example";

const render = (Component) => {
  ReactDOM.render(
    <AppContainer>
      <Component />
    </AppContainer>,
    document.getElementById("container")
  );
};

接下来，让我们渲染应用程序：

render(App);

在 App.tsx 中，让我们进行更新以注释掉导出的 AppProps（留作将来参考）并导出一个 isLoading 布尔变量作为 AppState 的一部分。我们还将为我们的标题设置一个新的常量：

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


export interface AppState {
    isLoading: boolean;
}

const title = "Outlook Add-In Title";


export default class App extends React.Component<AppProps, AppState> {
  constructor(props, context) {
    super(props, context);
    this.state = {
        isLoading: true,
    };
  }

    componentDidMount() {

        Office.onReady(() => {
            this.setState({
                isLoading: false
            });

        });
  }

我们在componentDidMount方法中添加了逻辑来执行Office.onReady()方法，这是微软推荐的：https://learn.microsoft.com/en-us/office/dev/add -ins/develop/initialize-add-in。当 Office 准备就绪时，我们会将 isLoading 状态设置为 false。

在我们的 App 渲染函数中，我们将返回所呈现内容的条件：

 render() {
    
      //const { title, isOfficeInitialized } = this.props;
      return (
          this.state.isLoading
              ? (<div>Loading...</div>)
              : (<div className="ms-welcome">
                  <AppropriateAppComponent(s) />
                 </div>)
              )
  }
}