Office js TypeError： #<Object> 不是 react 组件中的函数

Question

我创建了一个react组件并构建了它。在构建导入到HTML页面并在Word加载项的任务窗格中呈现该页面之后。我添加了多个按钮来在word文档中插入一段文字，如果我点击按钮，我会看到以下错误：

js_includes_doctype.jsx?v=06-30-2022_1211&lp=Mon_Aug_29_10_38_28_PDT_2022&c=8_108:3 Uncaught (in promise) TypeError: #<Object> is not a function at Array.forEach (<anonymous>) at Array.c [as each] (js_includes_doctype.jsx?v=06-30-2022_1211&lp=Mon_Aug_29_10_38_28_PDT_2022&c=8_108:3:14458) at OSF.DDA.ApiMethodCall.constructCallArgs (word-web-16.00.js:25:65928) at OSF.DDA.AsyncMethodCall.verifyAndExtractCall (word-web-16.00.js:25:67509) at <computed> (word-web-16.00.js:25:80872) at Object.executeRichApiRequestAsync (word-web-16.00.js:25:89680) at word-web-16.00.js:25:410703 at new Promise (<anonymous>) at t.executeAsync (word-web-16.00.js:25:410658) at o.syncPrivate (word-web-16.00.js:25:386161)

以下是我在组件中添加的反应代码：

import '@servicenow/now-button';

const callApi = () => {
Word.run(async (context) => {
const paragraph = context.document.body.insertParagraph("This is para", "End");
let contentControl = paragraph.insertContentControl();
paragraph.font.color = "blue";
await context.sync();
});
}
export const initializeOffice = () => new Promise((resolve, reject) => {
console.log("ASdadqdadsa")
try{
Office.initialize = resolve;
}catch(e){
reject();
}
});
const view = (state, { updateState, dispatch }) => {
return (
<div>
{initializeOffice()}
<button label="Insert3" variant="primary" size="md" icon="" config-aria={{}} tooltip-content="" on-click={callApi}></button>
</div>
)
};
export default view;

我没有直接在外接程序任务窗格上呈现组件的权限，所以我必须将其导入HTML页面并呈现组件。我正在将office js脚本作为script标记加载到HTML页面上。在谷歌搜索和研究后找不到解决方案。任何帮助都会很棒。谢谢😊

Answer 1

页面加载时，您必须首先为Office.initialize分配一个函数。另外，为什么要将Office.initialize赋值包装在Promise返回函数中？

我认为Office.initialize应该是调用React代码的地方。我从这个示例中获得了以下内容：Getting Started Fabric React中的Word插件。

/* Render application after Office initializes. If the page is rendered in an Office add-in, show the UI using the render function 
defined in App.tsx. Otherwise, show a progress indicator with a message. */
Office.initialize = () => {
render(
<App title={title} />,
container
);
};