Mic*_*ato 6 javascript wordpress reactjs
我想创建一个可以嵌入到不同 WordPress 网站的小部件。例如，构建抵押计算器并添加功能，例如使用输入的信息创建可下载的 PDF。
是否可以通过反应来做到这一点？更具体地说，使用 create-react-app 工具。
先感谢您！
可以创建可嵌入反应的小部件，但这create-react-app不是正确的工具。
共享已编译的 js 包并在浏览器中使用它的最简单方法是将其打包为 UMD 格式。不过，create-react-app 不支持。从技术上讲，您可以从 create-react-app 导入一个包作为小部件，但这很痛苦。有些人通过解析应用程序清单来做到这一点，而另一些人则通过将索引 html 内容复制到目标页面中来做到这一点。大多数情况下，小部件获取输入数据，您将很难使用这些技术。
我建议你使用另一种支持 UMD 开箱即用的构建系统，如parcel/babel（最简单的）、webpack/babel、nwb 等。这里是 react 官方关于编译链的建议。
这是一个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>
</div>
</body>
ReactDOM.render 的第二个参数是渲染目标。它可以位于页面上的任何位置。
ReactDOM.render(element, document.getElementById('widgetTarget'));