访问 React 应用程序的功能，以便使用 Outlook 加载项的发送功能

Question

我尝试使用On send feature for Outlook add-ins。我的应用程序是使用 webpack 构建的 React 应用程序。在插件清单中，我需要指定将在项目发送时调用的文件和函数名称。

我定义的方法如下：

export function validateBody(params: any): void {
  console.log("Validate called");
  console.log(params);
  params.completed({ allowEvent: false });
}

导出的内容如下：

/***/ 181:
/***/ (function (module, __webpack_exports__, __webpack_require__) {

      "use strict";
      Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
      /* harmony export (immutable) */ __webpack_exports__["validateBody"] = validateBody;
      // import * as React from 'react';
      // import * as ReactDOM from 'react-dom';
      // import Test from '../Test';
      // import './index.css';
      //import './../function.ts'
      // ReactDOM.render(
      //   <Test text="index" />,
      //   document.getElementById('root') as HTMLElement
      // );
      function validateBody(params) {
        // console.log('Validationg Body');
        console.log("Validate called");
        console.log(params);
        params.completed({ allowEvent: false });
      }


      /***/

如何在清单中定义函数名称来调用此方法。
或者我怎样才能以一种将函数插入函数外部的方式定义函数，以便可以直接调用它。

Answer 1

我找到了解决方案，但我不喜欢它。所以我对其他选择很感兴趣。

我创建了一个组件，它将 HTMLElement 作为 props 并在渲染时将函数分配给该元素：

class FunctionHelper extends React.Component<{  dom: HTMLElement }, {}> {

    constructor() {
        super();
    }

    render() {
        (this.props.dom as any).validateFunction = this.TestEvaluation;
        console.log('Render App');
        return (
            <div className="App">
                <div className="App-header">
                    <img src={logo} className="App-logo" alt="logo" />
                    <h2>Welcome to React</h2>
                </div>
                <p className="App-intro">
                    To get started, edit <code>src/App.tsx</code> and save to reload.
                </p>
            </div>
        );
    }

    TestEvaluation(params: any): void {
        // console.log('Validationg Body');
        console.log("Validate called");
        console.log(params);
        params.completed({ allowEvent: false });
    }
}

这将呈现如下：

ReactDOM.render(
  <FunctionHelper dom={document.getElementById('root') as HTMLElement} />,
  document.getElementById('root') as HTMLElement
);

作为模板，我使用以下 html 文件来调用 dom 元素上的函数：

<!doctype html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
  <!-- Office JavaScript API -->
  <script type="text/javascript" src="https://appsforoffice.microsoft.com/lib/1.1/hosted/office.debug.js"></script>
  <title>React App</title>
</head>
<body>
  <div id="root"></div>
  <script>
    function validateMail(params) {
      console.log('Calling Function Validate')
      let element = document.getElementById('root');
      element.validateFunction(params);
    }
  </script>
</body>
</html>

然后我就可以使用validateMail函数了。

Answer 2

不幸的是，UILess 框架需要一个 HTML 页面来加载 header 中脚本标记中的函数文件。在使用 webpack 时解决这个问题的一种方法是为函数文件 javascript 创建一个自定义的 webpack 加载器，UILess HTML 函数文件可以检索它，就好像 webpack 像 CDN 一样为文件提供服务。这个加载器需要像文件加载器一样是一个单独的加载器： https://webpack.js.org/loaders/file-loader/

访问 React 应用程序的功能，以便使用 Outlook 加载项的发送功能

Access function of react app in order to use On send feature for Outlook add-ins

office-addins

reactjs

office-js