Ich habe schon bei Google gesucht, aber nichts gefunden…
Bitte, ist es möglich, ein Elementor (WordPress)-Widget mit React oder Angle zu erstellen? Ich muss eine Komponente erstellen, die einige Daten von einer API erhält und die Seite dynamisch rendert. Ich dachte an Webanwendung oder Iframe, bin mir aber nicht sicher.
Vielen Dank.
Mit React ist das möglich. Mit mehr Details könnte ich dir etwas weiterhelfen. Aber im Allgemeinen ist dies der Weg, es zu tun.
Geben Sie für Ihr Widget ein Div mit einer eindeutigen ID wieder. Zum Beispiel:
<div id="myReactWidget"></div>
Als Reaktion sehen Sie normalerweise Folgendes, um die App zu rendern:
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'));
Nun, wenn Sie ersetzen “Wurzel” durch “meinReactWidget” wird in Ihrem Elementor-Widget gerendert.
Beispiel:
Dies:
render(<App />, document.getElementById('root'));
Ersetzt durch:
render(<App />, document.getElementById('myReactWidget'));
Bitte beachten Sie, dass Sie müssen einreihen dein bauen Reactjs-Skript, damit dies funktioniert
Führen Sie dazu bitte in Ihrem Projekt-Root-Verzeichnis aus:
npm run build
Und werfen Sie einen Blick auf die /bauen Ordner, um zu sehen, was enthalten sein soll
Danke, es ist eine gute Idee, aber nach dem Bauen, wo muss ich das Bauverzeichnis kopieren? Innerhalb des mit Elementor Widget erstellten Plugins?
– Fernando Quinteiro
17. Dezember 2019 um 19:30 Uhr
Nun, es kommt darauf an, aber ja, Sie können es in den Widget-Ordner legen, wenn Sie möchten. Danach können Sie sie mit den üblichen WordPress-Hooks in die Warteschlange einreihen.
– jbergeron
17. Dezember 2019 um 19:58 Uhr
Was ist mit Änderungen von Controllern zu React-Komponenten?
– juanObrach
31. Juli 2020 um 18:02 Uhr
alizarion
Damit dies effektiv funktioniert, müssen mehrere Probleme gelöst werden, wie z Plugin
https://www.npmjs.com/package/@betrue/react-elementor
Basierend auf dem NX-Arbeitsbereichsmuster generieren sie React.js-Komponenten, die von Webkomponenten-Tags umgeben sind, die durch Schatten-DOM isoliert sind, der Status wird mithilfe von Redux geteilt.
Das Plugin generiert eine Startcodebasis, um die meisten dieser Fragen zu beantworten.
Dies ist eine sehr allgemeine Frage. Bitte erklären Sie, was Sie mit weiteren Details tun müssen.
– MEDZ
16. Dezember 2019 um 21:52 Uhr
Entschuldigung, ich weiß, es ist eine allgemeine Frage. Aber ich arbeite mit der Marketingabteilung zusammen, und sie mögen WordPress sehr, und ich kenne die PHP- und WP-Umgebung nicht. Sie möchten immer noch WordPress verwenden, um das Layout von Zielseiten zu erstellen, aber manchmal brauchen sie komplexe Dinge, von denen ich glaube, dass sie mit einem modernen Framework besser zu erledigen sind. Bei der Suche gestern habe ich nichts über die Verwendung von React oder Angle eingebettet in eine WordPress-Seite gefunden.
– Fernando Quinteiro
17. Dezember 2019 um 12:43 Uhr