基于 React 的 office 插件渲染，但从不响应任何用户交互答案

【问题标题】：React-based office addon renders, but never responds to any user interaction基于 React 的 office 插件渲染，但从不响应任何用户交互
【发布时间】：2022-08-10 23:41:26
【问题描述】：

因此，我正在对 Office 插件进行重大更新，但在此过程中，我遇到了一个奇怪的错误。虽然我的加载项使用我期望的数据呈现，但似乎没有事件回调（例如 onClick 侦听器）在我与之交互时做出反应。奇怪的是，这种行为似乎起源于我的应用程序的早期，在我偏离模板太远之前。我想知道这是否可能是某种版本控制问题，原因我将在下面讨论，但要引入我的代码的亮点：

对于我的入口点 index.tsx：

initializeIcons();

let isOfficeInitialized = false;

const title = \"Placeholder\";

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

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

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

在 app.tsx 中：

export default class App extends React.Component<AppProps, AppState> {
  
  loginClick = async () => {
    console.log(\"LoginClick fired\");
    try {
      beginOAuth();
    } catch (error) {
      console.error(error);
    }
  };

  getConditionalComponents() {
    if (loggedIn) {
      // Returns the actual app here.
    } else {
      // The DefaultButton here comes from FluentUI, but this does not appear to be
      // limited to FluentUI controls.
      return (
        <div className=\"loginContainer\">
          <DefaultButton
            className=\"ms-welcome__action\"
            buttonType={ButtonType.hero}
            iconProps={{ iconName: \"ChevronRight\" }}
            onClick={this.loginClick}
            text=\"Sign in\"
          />
        </div>
      );
    }
  }

  render() {
    const { title, isOfficeInitialized } = this.props;

    if (!isOfficeInitialized) {
      return (
        <Progress title={title} logo=\"assets/logo-filled.png\" message=\"Please sideload your addin to see app body.\" />
      );
    }

    return (
      <div className=\"ms-welcome\">
        <Header logo=\"assets/logo-notext.png\" title={this.props.title} message=\"Welcome!\" />
        {this.getConditionalComponents()}
      </div>
    );
  }
}

现在，一切都按预期呈现，但是当我单击登录按钮时没有任何反应。我可以看到点击事件触发，并且按钮的视觉反应就像它被点击一样，但最终我可以看到反应调用 noop 函数并且我的函数从未被调用。如果我强迫自己显示为已登录，相同的行为仍然存在，应用程序按我的预期呈现，但更改下拉列表、单击按钮等似乎都没有做任何事情。

现在，一件有趣的事情是，如果我将 index.tsx 中的 Office.onReady 块改回原来的样子：

Office.initialize = () => {
  isOfficeInitialized = True;
  render(App);
};

我的应用程序一开始不会呈现。但是，如果我右键单击并刷新托管应用程序的任务窗格，它会呈现和表现如预期。

这让我想知道这是否是某种依赖不匹配的问题。我将尝试将我的依赖项减少到可能相关的事情：

    \"@hot-loader/react-dom\": \"^17.0.2\",
    \"react\": \"^17.0.2\",
    \"react-dom\": \"^17.0.2\",
    \"webpack\": \"^5.50.0\",
    \"@babel/core\": \"^7.13.10\",

如果需要，我可以提供任何其他人。提前感谢您的任何建议！

当您使用 Office.initialize 时，您是否看到 Progress 组件，或者您只是得到一个空白屏幕？您是否尝试过调试 Office.initialize 或 onReady？见Debug ...。此外，请尝试here 中描述的备用 onReady 语法之一。 async/await 语法可以在 JS 中使用，尽管它暗示它仅适用于 TS。
使用 office.initialize 时，我只看到一个空白的任务窗格，没有进度组件或任何东西。调试并没有真正为我提供任何答案，onReady/initialize 和渲染函数都按我的预期调用，并且它们似乎正在按我的预期导入组件。在控制台中也没有任何我认为可疑的地方。最多，一些反应的证据令人耳目一新，但据我了解，这是在开发模式下的预期。不幸的是，其他 onReady 语法似乎没有任何区别。
调试时，是否命中了 onReady 回调中的 render(App); 行？ render 方法的第一行是否被命中？使用initialize 时出现同样的问题。另外，Office 和您的操作系统的版本和内部版本号是多少？
是的，代码的命中方式完全符合我使用initialize 和onReady 所期望的方式，并且（如果我使用onReady）我的应用程序确实呈现，它只是不响应任何输入。我正在使用 Excel 版本 2206（内部版本 15330.20264 即点即用），我的操作系统是 Windows 10 版本 21H2（内部版本 19044.1826）。此行为也发生在 Excel 的 Web 版本中。
我很难过。在这一点上我可以建议的最好的方法是使用initialize，但立即调用location.reload（可能是initialize 中的最后一行）。看看这是否有效。

标签： javascript reactjs webpack office-js office-addins

【解决方案1】：

终于想通了！

问题源于我正在使用共享的 javascript 运行时，将一些加载项命令连接到功能区按钮，并将这些命令构建在单独的块中。这些加载项命令的代码导入了任务窗格也使用的代码。我不太清楚为什么这会导致它的行为，因为它不应该从我的index.tsx 导入运行任何东西（或者实际上是某些实用程序功能之外的任何东西），但暂时删除这些导入摆脱了这种行为，作为一种解决方法，我已经将我的加载项命令的函数移动到我的 index.tsx 文件中，并设置 webpack 停止构建它们曾经所在的块。在index.tsx 中包含这些命令有点难看，但它有效！

【讨论】：