将前端库导入Wix网站

Question

3

我已经使用CRA开发了一个React应用程序，并尝试将其托管在现有的Wix页面上。使用WIX，我可以使用JavaScript文件，因此我将我的应用程序代码与依赖项捆绑到一个文件中，并尝试将React和React-DOM代码从其官方CDN复制并粘贴到我的目录中。

不知何故，它仍然无法正常工作，在react-dom.js中我看到错误：

'window' is not defined

“现在我只尝试使用React和React-DOM进行导入，但是这个问题通常适用于将JS前端库导入WIX中。我需要将应用程序代码托管在WIX页面内，但我认为如果我使用iframe从CDN添加应用程序依赖项，就像this topic中那样，然后使用WIX语法引用它，应该可以正常工作。”

let React = $w("#elementid").window.React;

获取iframe，然后从中获取React/其他库的引用。iFrame（WIX HTML元素）托管在同一源中。

我还可以使用列在此处的node.js代码和npm模块。

你有什么想法？

- WestedCrean

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- SteveC · Accepted Answer

您不能直接在 Wix Code 页面上使用原生的 React 代码。

您可以编写 HTML 文档并将其加载到 iframe 元素中，但出于安全原因，代码需要在 iframe 中运行。您只能在 iframe 元素中使用 postMessage 和 onMessage 函数，在 iframe 和 Wix Code 页面之间交换消息。

你可以包含nodejs软件包（一旦获得批准），只要它们不试图直接操作dom。您需要像使用jquery框架一样考虑Wix Code页面。有一个主页面作用域选择器$w，其中包含页面元素。只有在Wix Editor中定义的元素才能通过$w范围选择器或相关事件处理程序进行操作。

您唯一可以使用直接操作dom或通过类似react的框架操作dom的javascript是使用htmlComponent中的iframe进行沙箱化。