So verwenden Sie Thymeleaf th: Text in reactJS

Es gibt keine vernünftige Problemumgehung.

Sie erhalten diesen Fehler, weil Thymeleaf XML ausgibt und JSX-Parser XML nicht analysieren.

Sie haben das getan, weil JSX sehr, sehr ähnlich wie XML aussieht. Aber sie sind sehr, sehr verschieden, und selbst wenn du Thymeleaf irgendwie gehackt hättest, um Namensattribute zu entfernen und eine Komponente zum Rendern zu bekommen, wäre es nur ein flüchtiger Moment von mit Klebeband zusammengeklebtem, von der Jury manipuliertem Code werde unter weiterer Nutzung auseinanderfallen.

Das ist eine wirklich, wirklich schlechte Idee, weil JSX Javascript ist. Sie generieren Javascript im laufenden Betrieb. Um nur ein paar Gründe zu nennen, wird dies auf lange Sicht nicht funktionieren:

• Das macht Ihre Komponenten schwierig, wenn nicht sogar unmöglich zu testen.
• Das Nachdenken über den Anwendungszustand wird ein Albtraum sein, da Sie sich schwer tun werden herauszufinden, ob die Quelle eines bestimmten Staates von Thymeleaf oder JS kommt.
• Ihre Anwendung wird völlig zum Stillstand kommen, wenn Thymeleaf schlechtes JS ausgibt.
• Diese Probleme werden mit der Zeit immer schlimmer (Thyme?), da die Entwickler die Leichtigkeit missbrauchen, mit der sie serverseitige Daten auf die Clientseite rendern können, was zu einer verrückten Anwendungsarchitektur führt.

Tu das nicht. Benutze einfach Thymeleaf oder verwende einfach React.

Beispielalternative: Ich arbeite hauptsächlich an einer React-Anwendung, die von einem Java-Backend unterstützt wird. Also verstehe ich, wie jemand auf diese Hybride stößt und denkt, dass es eine gute Idee ist. Wahrscheinlich verwenden Sie Thymeleaf bereits und versuchen herauszufinden, wie Sie es vermeiden können, Ihre Servlets neu zu schreiben, aber trotzdem die Macht von React erhalten.

Wir waren vor zwei Jahren in einem ähnlichen Boot, außer mit einem alternden JSP-Frontend, aber der Unterschied ist vernachlässigbar. Was wir getan haben (und es funktioniert gut), ist die Verwendung einer JSP-Seite, um die gesamte React-Anwendung zu starten. Es gibt jetzt eine one JSP-Seite, die wir für den Benutzer rendern. Diese JSP-Seite gibt JSON in einem einzigen <script> -Tag aus, das einige Startup-Daten enthält, die wir andernfalls sofort abrufen müssten. Dies enthält Ressourcen, Eigenschaften und nur einfache Daten.

Wir geben dann ein weiteres <script> aus, das auf den Speicherort eines kompilierten JS-Moduls zeigt, das die gesamte eigenständige React-Anwendung enthält. Diese Anwendung lädt die JSON-Daten beim Starten einmal und führt dann für den Rest Backend-Aufrufe aus. An einigen Stellen müssen wir JSP für diese verwenden, die weniger als ideal ist, aber immer noch besser als Ihre Lösung. Was wir tun ist, dass die JSP-Seiten ein einzelnes Attribut ausgeben, das JSON enthält. Auf diese Art und Weise (und mit einigem vorsichtigem Zurückschneiden durch unsere XHR-Bibliothek) erhalten wir eine Datenebene für den armer Mann, die auf einem JSP-Framework aufgebaut ist, für dessen Änderung wir keine Zeit haben.

Es ist definitiv nicht ideal, aber es funktioniert gut und wir haben enorm von den vielen Vorteilen von React profitiert. Wenn wir Probleme mit dieser speziellen Implementierung haben, sind sie leicht zu isolieren und zu lösen.

Es ist möglich, ReactJS-Apps in Thymeleaf zu verpacken. Denken Sie, wenn Sie einen statischen persistenten Teil (wie einige Links oder sogar nur angezeigte Daten) möchten, könnten Sie Thymeleaf verwenden. Wenn Sie ein kompliziertes Teil haben (etwas, das DOM-Repaints, gemeinsame Daten, Updates von UI / Sockets / was auch immer benötigt), könnten Sie React verwenden.

Wenn Sie den Status übergeben müssen, können Sie Redux / andere Methoden verwenden.

Sie könnten Ihr Backend Daten über eine Rest-API an den React-Teil senden lassen und einfach Ihre einfachen Teile als Fragmente oder als ganze Teile von einfachem HTML mit Thymeleaf rendern.

Denken Sie daran, Thymoleaf ist wirklich nur HTML. Reagieren ist ein virtuelles DOM, das als HTML gerendert wird. Es ist eigentlich ziemlich einfach, einen auf den anderen zu übertragen. So könntest du alles schreiben "Statisch" oder das nicht viel auf UI reagiert, in Thymeleaf / HTML. Sie könnten diese Teile auch in React rendern, aber ohne State.

Thymeleaf 3 ermöglicht Ihnen render Variablen von Ihrem Java in eine separate JS-Datei . Das ist also auch eine Option, um in JSX zu gelangen

function showCode() { var code = /*[[${code}]]*/ '12345'; document.getElementById('code').innerHTML = code; }