Question

我想创建一个可以嵌入到不同WordPress网站的小部件。例如，构建抵押计算器并添加功能，例如使用输入的信息创建可下载的PDF。

有可能这样做吗？更具体地说，使用create-react-app工具。

提前谢谢！

Answer 1

ReactDOM.render的第二个参数是渲染目标。它可以在页面上的任何地方。

ReactDOM.render(element, document.getElementById('widgetTarget'));

Answer 2

可以创建反应可嵌入的小部件，但是create-react-app不是这样做的正确工具。

共享已编译的js包并在浏览器中使用的最简单方法是将其打包为UMD格式。但是，create-react-app doesn't support it。从技术上讲，您可以从create-react-app导入捆绑作为小部件，但这很麻烦。有些人通过parsing the application manifest完成此操作，其他人则通过copying the index html content into the destination page完成此操作。在大多数情况下，小部件会接收输入数据，因此使用这些技术会很困难。

我建议您使用其他开箱即用的支持UMD的构建系统，例如parcel/babel（最简单的系统），webpack / babel，nwb等。以下是有关compile chains的官方建议。

这是一个示例index.js文件，可用于声明小部件：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

window.MyWidget = function(idElement, param1, param2) {
    let config = {param1, param2);
    ReactDOM.render(<App config={config} />, document.getElementById(idElement));
    return this;
}

然后可以将小部件实例化到目标页面：

<body>
  <div id="react-widget">

  <script src="http://cdm.com/my-react-widget-bundle.js"></script>
  <!-- if bundled separately, load the css -->
  <script>
    window.addEventListener("DOMContentLoaded", function(event) {
      new MyWidget("#react-widget", "toto", "tata");
    });
  </script>
</body>
</body>

是否可以创建嵌入式React应用小部件？

2 个答案: