如何將普通的 javascript 導入 React 應用程序

Question

我想為我的研究小組編寫一個 Office-AddIn（React 應用程序），用於跟蹤 Word 文檔中的化合物。 我們在大學里用來繪制分子的軟件叫做“ChemDoodle”，它帶有一個基於 HTML5 和 JavaScript 的免費 WebAPI： ChemDoodleWeb-Components 。 如果你想在純 HTML 網站中使用它們，首先要在 HTML 文件的標題部分添加兩個引用：

<link rel="stylesheet" href="[path]/ChemDoodleWeb.css" type="text/css">
<script type="text/javascript" src="[path]/ChemDoodleWeb.js"></script>

然后可以在同一文件的正文部分中訪問庫，只需通過

<script>//Do something ChemDoodle related </script>

“ChemDoodleWeb.js”文件在外部預設了一個名為“ChemDoodle”的變量，它在控制畫布的任何地方都被使用。

總的來說，我對 React、OfficeAddIn 或 JavaScript 非常陌生。 所以我的問題可能非常愚蠢：但是我有沒有機會在我的 react-office 插件中使用這個庫？ 我試着只導入它，當然它不是一個模塊。

任何有更多線索的人都可以簡要介紹一下 API 並告訴我，如果有辦法嗎？

謝謝克里斯托夫

Answer 1

您有多種選擇，您可以下載源代碼並使用import或require將其本地導入到 react 項目中，或者您可以假設模塊在那里並通過window 、 document或global范圍訪問它。

看起來 chemdoodle 有一個 Web Components 實現，你也可以在 react 中使用。 你可以參考這個頁面： ReactJS web components 文檔

Answer 2

ChemDoodle Web 組件不作為 React 模塊分發，但您可以從提供的源創建一個。 如果您不想這樣做，我建議您在首先設置 DOM 時為 ChemDoodle Web 組件創建 <canvas> 元素。 然后，您可以在通過 React 在您已經創建的 <canvas> 元素上設置所有內容后使用 ChemDoodle Web Components 庫。 本教程頁面展示了它是如何工作的： https : //web.chemdoodle.com/tutorial/advanced/initializing-components-after-closure-the-dom

本教程展示了如何在 DOM 中已經存在的 <canvas> 元素上初始化 ChemDoodle Web 組件，以及如何在沒有預先存在的 <canvas> 元素的封閉 DOM 中創建 ChemDoodle Web 組件。

我還想解決 Simen 所說的對 Web 組件的常見誤解。 ChemDoodle Web 組件不是 HTML5 Web 組件。 ChemDoodle Web 組件庫於 2009 年 6 月 15 日公開發布https://web.chemdoodle.com/installation/changelog/ 。 Alex Russell 在 Fronteers 2011 上宣布的 W3C Web Components https://fronteers.nl/congres/2011/sessions/web-components-and-model-driven-views-alex-russell 。 CWC 將來可能會支持部分規范。