Elementor wordpress + React 或 Angular答案

【问题标题】：Elementor wordpress + React or AngularElementor wordpress + React 或 Angular
【发布时间】：2020-04-09 08:56:28
【问题描述】：

我已经在谷歌上找过，但什么也没找到……

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

谢谢。

【问题讨论】：

这是一个非常笼统的问题。请详细说明您需要做什么。
对不起，我知道这是一个普遍的问题。但我在营销部门工作，他们真的很喜欢 wordpress，我不知道 php 和 wp 环境。他们仍然希望使用 wordpress 来制作登陆页面的布局，但有时他们需要复杂的东西，我认为使用现代框架会更好。昨天搜索我没有发现任何关于在 wordpress 页面中使用 react 或 angular 嵌入。

标签： angular reactjs wordpress elementor

【解决方案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'));

请注意，您必须 enqueue 您的 build reactjs 脚本才能正常工作

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

npm run build

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

【讨论】：

谢谢，这是个好主意，但是在构建之后，我需要将构建目录复制到哪里？在使用 elementor 小部件创建的插件内部？
嗯，这取决于，但是如果你愿意，你可以把它放在小部件文件夹中。在您可以使用常见的 WordPress 钩子将它们排入队列之后。
如何处理从控制器到 React 组件的变化？

【解决方案2】：

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

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

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

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

【讨论】：