我想创建一个可以嵌入到不同 WordPress 网站的小部件。例如构建抵押计算器并添加功能，例如使用输入的信息创建可下载的 PDF。
是否可以用 React 做到这一点？更具体地说，使用 create-react-app 工具。
提前致谢!
最佳答案
可以创建 React 可嵌入小部件，但 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 等。 下面是react官方关于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>
</div>
</body>
关于javascript - 是否可以创建嵌入式 React 应用程序小部件？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52750875/