Elementor wordpress + React 或 Angular

Question

我已经查看了 google 但什么也没找到...

拜托，是否可以使用 React 或 angular 创建一个 Elementor (Wordpress) 小部件？我需要创建一个组件，它将从 api 获取一些数据并动态呈现页面。我考虑过 Web 应用程序或 Iframe，但我不确定。

谢谢。

Answer 1

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'));

请注意，您必须入队您的 build reactjs 脚本才能工作

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

npm run build

然后查看 /build 文件夹以查看要包含的内容

Answer 2

有几个问题需要解决才能有效地工作，例如 Elementor Widget 之间的状态管理，CSS React 应用程序和 Elementor 之间的隔离以及如何管理这两者之间的道具......我试图通过 NX 插件提供这些问题的答案

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

基于 NX 工作区模式，他们将生成 react.js 由 web 组件标签包装的组件，这些组件被影子 DOM 隔离，状态使用 redux 共享。

该插件将生成一个起始代码库来回答其中的大部分问题。

Elementor wordpress + React 或 Angular

Elementor wordpress + React or Angular

angular

reactjs

wordpress

elementor