Elementor WordPress + React 或 Angular

Question

Elementor WordPress + React 或 Angular

angularreactjswordpresselementor

7

我已经在谷歌上查找了，但没有找到任何信息...

请问，是否可以使用React或Angular创建Elementor（WordPress）小部件？我需要创建一个组件，从API获取一些数据并动态呈现页面。我考虑过Web应用程序或Iframe，但我不确定。

谢谢。

- Fernando Quinteiro

1

这是一个非常泛泛的问题。请详细说明您需要做什么。 - MEDZ

抱歉，我知道这是一个泛泛的问题。但是我与市场部门合作，他们非常喜欢WordPress，而我不懂PHP和WP环境。他们仍然希望使用WordPress来制作着陆页面的布局，但有时他们需要复杂的功能，我认为最好使用现代框架来完成。昨天搜索时，我没有找到有关在WordPress页面中嵌入React或Angular的任何信息。 - Fernando Quinteiro

3个回答

0

要使其有效工作，需要解决几个问题，例如Elementor小部件之间的状态管理、React应用程序和Elementor之间的CSS隔离以及如何在这两者之间管理props... 我尝试通过一个NX插件来回答这些问题。

https://www.npmjs.com/package/@betrue/react-elementor

基于NX工作区模式，他们将生成由Web组件标签包装的React.js组件，通过Shadow DOM进行隔离，使用Redux共享状态。

该插件将生成一个起始代码库来回答大多数这些问题。

- alizarion

我认为你的插件听起来像是我正在开发的一个项目的绝佳解决方案。然而，当我尝试打包这个插件时，它一直报错，我无法继续下去 :/ 有什么建议吗？(ERROR in ./libs/ui/src/lib/web-component-wrapper/web-component-wrapper.tsx:22:30) - Alfie Robles

0

实际上，@jbergeron提出的解决方案确实有效。但你只完成了一半。如果您想要在另一个应用程序/HTML页面中呈现，比如说一个React应用程序，而该页面使用自己的主题/样式等，则可能会导致样式问题。有一种解决方法是隔离React应用程序，使其不会干扰页面的其他部分，在您的情况下是Elementor。

关键短语是影子DOM和Web组件。

您可以按照此指南准备React。

它非常通用，您还可以将其与MUI这样的库结合使用。

- V. Homi

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

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

- jbergeron · Accepted Answer

可以使用React实现。如果提供更多细节，我可以提供更多帮助。但通常情况下，这是实现的方法。

对于您的小部件，请输出一个具有唯一ID的div。例如：

<div id="myReactWidget"></div>

在React中，通常使用以下代码来渲染应用程序：

import React, { Component } from 'react';
import { render } from 'react-dom';

class App extends Component {   
  render() {
    return (
      <div>
        <p>
          Start editing to see some magic happen :)
        </p>
      </div>
    );
  }
}

render(<App />, document.getElementById('root'));

如果你将 "root" 替换为 "myReactWidget"，它将在你的 Elementor 小部件中呈现。

示例：

这样：

render(<App />, document.getElementById('root'));

被替换为：

render(<App />, document.getElementById('myReactWidget'));

请注意，您需要排队您的构建ReactJS脚本才能使其工作。

为此，请在您的项目根目录中运行：

npm run build

请查看/build文件夹以了解需要包含的内容。