我已经使用 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 元素)托管在同一源中。
我还可以使用列出的 Node.js 代码和 npm 模块 here
想法?
最佳答案
您不能直接在 Wix 代码页面上使用 native React 代码。
您可以编写 HTML 文档并将其加载到 iframe 元素中,但出于安全原因,代码需要在 iframe 中运行。您可以仅使用 iframe 元素使用 postMessage 和 onMessage 函数在 iframe 和 Wix 代码页面之间交换消息。
https://www.wix.com/code/reference/$w.HtmlComponent.html
https://support.wix.com/en/article/wix-code-working-with-the-html-element
你可以包含nodejs包(一旦获得批准),只要它们不尝试直接操作dom。您需要像考虑 jquery 框架一样考虑 Wix 代码页面。主页面范围选择器 $w 是页面元素所在的位置。只有在 Wix 编辑器上定义的元素才能通过 $w 范围选择器或相关事件处理程序进行操作。
使用 javascript 直接操作 dom 或通过像 React 这样的框架来操作 dom 的唯一方法是使用 htmlComponent 在 iframe 中沙箱化。
关于javascript - 将前端库导入wix网站,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53815059/