Ich möchte ein Widget erstellen, das in verschiedene WordPress-Sites eingebettet werden kann. Als Beispiel einen Hypothekenrechner erstellen und Funktionen wie das Erstellen einer herunterladbaren PDF-Datei mit den eingegebenen Informationen hinzufügen.
Kann man das mit React machen? Genauer gesagt mit dem Tool create-react-app.
Danke im Voraus!
Kiruahxh
Es ist jedoch möglich, einbettbare Widgets zu erstellen create-react-app ist nicht das richtige Werkzeug dafür.
Der einfachste Weg, ein kompiliertes js-Bundle zu teilen und in einem Browser zu verwenden, besteht darin, es im UMD-Format zu packen. Jedoch, create-react-app unterstützt es nicht. Technisch gesehen können Sie ein Bundle aus create-react-app als Widget importieren, aber es ist mühsam. Manche Leute tun dies durch Analysieren des Anwendungsmanifestsund andere von Kopieren des Index-HTML-Inhalts in die Zielseite. Meistens nimmt ein Widget Eingabedaten entgegen, und Sie werden es mit diesen Techniken schwer haben.
Ich würde Ihnen vorschlagen, ein anderes Build-System zu verwenden, das UMD standardmäßig unterstützt, z Paket/Babel (am einfachsten), webpack/babel, nwb usw. Hier sind offizielle Empfehlungen zu reagieren Ketten zusammenstellen.
Hier ist ein Beispiel index.js Datei, die Sie verwenden könnten, um ein Widget zu deklarieren:
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;
}
Das Widget kann dann in die Zielseite instanziiert werden:
<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>
Das zweite Argument von ReactDOM.render ist das Renderziel. Es kann überall auf der Seite stehen.
ReactDOM.render(element, document.getElementById('widgetTarget'));
Okay, könnte ich also die JS-Datei erstellen und in ein CDN hochladen und dann in den Elementparameter einfügen? Oder verwenden Sie möglicherweise einen iFrame, um das React-Modul zu rendern? Welche wäre am besten?
– Michael Carniato
11. Oktober 2018 um 6:03 Uhr
Fügen Sie das Containerelement mit einer ID oder einem anderen eindeutigen Abfrageselektor zu der Seite hinzu, auf der das ausgeführte Widget reagieren soll. Fügen Sie unterstützendes Widget js hinzu. Wenn ReactDOM.render aufgerufen wird, wird Ihre React-App (Argument 1) innerhalb des Zielelements (Argument 2) gerendert.
– Dudson
12. Oktober 2018 um 17:08 Uhr
Fantastisch! Danke für Ihre Hilfe 🙂
– Michael Carniato
14. Oktober 2018 um 21:44 Uhr
Ja, sollte nicht schwierig sein. Sie können damit beginnen, einen einfachen Shortcode zu erstellen, der einen einfachen HTML-Code druckt, die Dateien von React in die Warteschlange stellt und Ihr benutzerdefiniertes JS ausführt, um das Ergebnis zu erstellen.
– Brasilo
11. Oktober 2018 um 3:11 Uhr