代码之家 › 专栏 › 技术社区 › lokimidgard

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

office-addins office-js reactjs

lokimidgard · 技术社区 · 7 年前

我尝试使用 On send feature for Outlook add-ins

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 });
      }


      /***/

如何在清单中定义函数名来调用此方法。

2 回复 | 直到 7 年前

lokimidgard 7 年前

我创建了一个组件,该组件将HTMLElement作为道具,并在渲染时将函数分配给该元素:

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 作用

Outlook Add-ins Team - MSFT 7 年前

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