Question

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

以某种方式仍然无法正常工作，在react-dom.js中，我看到了错误：

'window' is not defined

虽然现在我尝试仅使用react和react-dom进行导入，但该问题通常适用于将js前端库导入WIX。

我需要将应用程序代码托管在wix页面中，但是如果我从iframe中使用cdns添加应用程序依赖项，那么它应该可以正常工作，有点像this topic，然后使用wix语法引用它

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

获取iframe，然后从那里获取React /其他库参考。 iFrame（WIX HTML元素）位于同一来源。

我还可以使用here中列出的node.js代码和npm模块

有想法吗？

Answer 1

您不能直接在Wix代码页面上使用本机反应代码。

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

您可以包括nodejs程序包（一旦批准），只要它们不尝试直接操作dom。您需要以与jquery框架相同的方式来思考Wix Code页面。主页面范围选择器$ w是页面元素所在的位置。只能通过$ w范围选择器或相关事件处理程序来操纵在Wix编辑器上定义的元素。

使用javascript直接或通过诸如react之类的框架操纵dom的唯一方法是使用htmlComponent在iframe中进行沙箱测试。